A tour of React animation libraries with a focus on developer experience
Here's a rundown of what should happen (it's more complex than it appears at first glance!)
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.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.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.react-spring
, popmotion-pose
, and react-transition-group v2
there are more powerful, updated alternatives with better documentation.yarn
or npm install
yarn start
or npm start