Sharing is caring!

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

example animation

Here’s a rundown of what should happen (it’s more complex than it appears at first glance!)

  1. 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.
  2. New cards can be added individually to the cards array, and should be animated in.
  3. Individual cards can also be removed from the cards array, and should be animated out as they leave.
  4. When the grid component is unmounted, it should wait for its children to animate out before animating itself and leaving the DOM.
  5. In-progress animations should be appropriately cancelled if the enter/exit state is toggled rapidly.
  6. If the cards were shuffled, they should still animate out with the expected staggered order.

Why it’s hard

  1. The sequenced “enter” and “exit” animations of both a parent and its child requires coordination between different components.
  2. The enter and exit animations are not simple mirrors of each other, as some libraries expect.
  3. 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.
  4. 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.
  5. 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.

Subscribe to the Newsletter

Get our latest news,tutorials,guides,tips & deals delivered to your inbox.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.