A tour of React animation libraries with a focus on developer experience
What’s the most powerful and developer-friendly React animation library?
The goal: replicate this animation in React
Here’s a rundown of what should happen (it’s more complex than it appears at first glance!)
- When it’s first rendered in React, the grid component should animate in, followed by the staggered animation of its child, a list of cards.
- New cards can be added individually to the cards array, and should be animated in.
- Individual cards can also be removed from the cards array, and should be animated out as they leave.
- When the grid component is unmounted, it should wait for its children to animate out before animating itself and leaving the DOM.
- In-progress animations should be appropriately cancelled if the enter/exit state is toggled rapidly.
- If the cards were shuffled, they should still animate out with the expected staggered order.
Why it’s hard
- The sequenced “enter” and “exit” animations of both a parent and its child requires coordination between different components.
- The enter and exit animations are not simple mirrors of each other, as some libraries expect.
- The positions of the grid and cards should be animated with a spring (or, failing that, with an elastic easing), while opacity changes should have a linear easing.
- The cards animating in and out are initially staggered, but adding or removing cards one-by-one should result in a fluid animation with no delay.
- Toggling the example rapidly should not create a broken view— cancelled animations should be cleaned up and there shouldn’t be any straggler DOM elements left behind.