ComfortAjalaOluwatimilehin/react-animation-comparison

Update: I have a new blog post and repo showing some concrete examples of how to build complex animations in React "from scratch"

Comparing the Ease of Use of 5 React Animation Libraries

Read the blog post where I give a more in-depth discussion of this project.

The Goal: to replicate this animation on entering and exiting react components:

The Arbitrary Time Limit: Spend no more than an hour/hour and a half learning a library's API and trying to implement the animation.

The Results

1. react-move

• A lightweight library that applies d3's interpolate to specified components. Ultimately the features it offered were a bit too simple and I struggled to get the complete sequential animation working.
• my animation attempt
• the code

2. react-motion-ui-pack

• Quickly became apparent that this simple library wasn't suited to the type of animation I was trying to do.
• my animation attempt
• the code

3. react-motion

• An hour and a half wasn't enough time for me to understand the intricacies of this physics-based animation library and to create the example animation.
• my animation attempt
• the code

4. velocity-react

• A powerful, intuitive option that got me far but then ended up tripping me up when it came time to get the nested leave animations working.
• my animation attempt
• the code

5. react-transition-group & animejs

• Using react-transition-group and a JavaScript animation library ended up being by far my favorite technique
• my animation attempt
• the code

6. react-transition-group & gsap

• Very much like the animejs example. Animejs is more lightweight, ES2015-friendly, and open source, but GSAP is the standard for powerful JavaScript animation libraries.
• my animation attempt
• the code