DEV Community

Rupak Dey
Rupak Dey

Posted on • Edited on

REACT ANIMATION - Animation Libraries for React.js

#react #animation #webdev #javascript

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!



Connect with me : Github | Tutoring | Freelance Web Dev

Top comments (2)

Collapse
 
moniruzzamansaikat profile image
Moniruzzaman Saikat •

Thank you

Collapse
 
deyrupak profile image
Rupak Dey •

I'm glad it proved to be useful!

Read next

marcuskohlberg profile image

Building simple event-driven applications with Pub/Sub

Marcus Kohlberg -

hamzakhan profile image

🛠️ React Server Components vs. Client Components: When to Use Which? ⚡

Hamza Khan -

r0mymendez profile image

Deploying Docs-as-Code on AWS: Building Dynamic Documentation Sites in MkDocs and Docusaurus

Romina Mendez -

vivecodes profile image

Understanding Expensive Calculations in React for Beginners

vive -