react activate animation before props change - reactjs

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:
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.
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.