A tour of React animation libraries with a focus on developer experience
🆕 Updated for 2019
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.
We are a world class software startup focusing on building scalable, high-performance web & mobile application. We have started our journey back in 2015. And in those years we have provided support for more than 15 thousand customers over the world. We build products that create values. RedQ, Inc