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

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

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