react activate animation before props change

Question

I have simple react app that contains 3 components: app, ul and li. The app holds an array of items. Every 5 seconds (with set interval) the app slices 3 consecutive items and send them to the ul component to be displayed. If we start with:

item 3

item 2

item 1

after 5 seconds the list will be:

item 4

item 3

item 2

I'm trying to create an animation that once the props to the ul are updated, will push down the current list, until the bottom item is hidden, and after that it the next item should appear on top. I thought about using the getDerivedStateFromProps method to activate the animation, use async await to hold the app until the animation will end (translateY) and then apply another animation of opacity on the new item. I don't think it's a good solution and I think there must be simpler way to do it. I also tried using the react transition group, but it only works when the item appear and not when content is changing. I would love if anyone could point me in the right direction.

Answer 1

There are a ton of options to animate this type of event in React.

It's usually referred to as a Transition, because you need to animate a component before it unmounts. You can either:

1. Implement it yourself:

   By using state in the <ul> component. Your ul should keep track of every item it has rendered in its state and only remove an item from the list when that item has called a callback at the end of its animation.

   Make your li components be able to receive a shouldGoAway prop as a boolean and an animationCallback that will be called when the animation is over. The li should check if prop.shouldGoAway and if it is true is should animate itself to fall out of view (use a react animation library like react-spring, a js animation library like animejs or pure CSS animations) and call the animationCallback when it is done.

2. Use one of the many React animation libraries that support Transition animations.

   The choices that come to mind are react-transition-group, react-spring and react-motion.

Good luck.