DEV Community

loading...

REACT ANIMATION - Animation Libraries for React.js

deyrupak profile image Rupak Dey ・1 min read

Framer Motion

  • JavaScript library
  • Relatively new
  • Easiest, feature rich & production ready
npm i framer-motion
Enter fullscreen mode Exit fullscreen mode

React Reveal

  • Based on the popular css animation library animation.css
  • Primarily used to show and/or hide DOM elements
npm i react-reveal
Enter fullscreen mode Exit fullscreen mode

React Motion

  • React specific animation library
  • Based on real physics
  • Uses sniffing and dumping
npm i react-motion
Enter fullscreen mode Exit fullscreen mode

React Spring

  • Inspired by react-motion
  • Attempts to improve performance over react-motion
npm i react-spring
Enter fullscreen mode Exit fullscreen mode

React Anime

  • React wrapper for the popular library Anime.js
  • All the functionalities wrapped into their declarative form
npm i react-anime
Enter fullscreen mode Exit fullscreen mode



Worked with other cool libraries? Share in the comment section below!

Discussion (2)

pic
Editor guide
Collapse
moniruzzamansaikat profile image
Collapse
deyrupak profile image
Rupak Dey Author

I'm glad it proved to be useful!