🆕 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!)

1. When it's first rendered in React, the grid component should animate in from the left, followed by the staggered animation of its child, a list of cards, with each card fading in from above.
2. New cards can be added individually to the cards array, and should be animated in with a "fade up" animation.
3. Individual cards can also be removed from the cards array, and should be animated out with a "fade up" animation 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 in the opposite direction from where it arrived.
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. The initial staggered entry of cards should have them animating in from the top, but an individual card being added should have its own animation — fading in from the bottom.
6. 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.

The results, ordered by preference

1. 🥇 react-transition-group & animejs

• Using react-transition-group and a vanilla JavaScript animation library ended up being my favorite technique, because it offers total flexibility and control, at the cost of some additional complexity.
• Animejs is lightweight and open source, and I find its imperative API more intuitive than the typical React approach for coordinated, complex animations.
• my animation attempt
• my code
• React transition group docs
• Anime docs

2. 🥈 react-spring

• If you'd prefer to use a React-specific library, I recommend react-spring.
• The library's use of the hooks API is very concise and expressive—it took only about 70 lines of code to implement the example!
• The library is in active development and supports a wide variety of use cases.
• I was unable to get the cards to have different animations depending on whether they were arriving as a group ("fade in down") or as an individually added card ("fade in up").
• my animation attempt
• my code
• react-spring docs

3. 🥉 react-transition-group & gsap

• Basically the same as the animejs example, just with the animation library swapped out. GSAP has a less permissive license and it's older and heavier than animejs, but it's battle-tested and powerful.
• my animation attempt
• my code
• React transition group docs
• GSAP docs

4. react-pose

• A year ago, this was my favorite option, but now the number of bugs make me hesitant to recommend it.
• The good:
  • the library API is very user friendly.
  • I liked how the library automatically applies transitions to DOM elements for you instead of just tweening values and making you handle the style updates yourself.
• The bad (bugs):
  • Interrupted repeat animations are implemented incorrectly (extra ghost elements are animated in if the previous animation did not fully complete). Try toggling the example multiple times fairly quickly to see what I mean. Link to issue
  • Shuffling the cards will result in an out-of-order staggered exit transition. Link to issue
  • (Introduced in v4): Individual card animations no longer work correctly.
• my animation attempt
• my code
• React Pose docs

5. react-move

• A lightweight library that helps D3 and React work together. It ended up not being quite flexible enough for the needs of this task, though if the demo featured more traditionally D3-like interactions it would have been great.
• my animation attempt
• my code
• react-move docs

6. velocity-react

• A straightforward option that got me far but then ended up tripping me up when it came time to get the nested leave animations working.
• At one point, this library might have been one of the better options for animating in React, but now with react-spring, popmotion-pose, and react-transition-group v2 there are more powerful, updated alternatives with better documentation.
• my animation attempt
• my code
• velocity-react docs

7. react-motion

• I found this library very difficult to use when implementing the example.
• my sad animation attempt
• my code
• react motion docs

Run the project locally

1. yarn or npm install
2. yarn start or npm start