DEV Community

Rupak Dey
Rupak Dey

Posted on • Updated 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

riteshshukla04 profile image

Building React Native In-App Modules bypassing the JS bridge.

Ritesh Shukla -

kanhaiyabanjara profile image

Web APIs

Kanhaiya Banjara -

uhteddy profile image

Introducing svelte-bundle

uhteddy -

jacksonsantin profile image

Login/cadastro com firebase + Vue JS #PASSO 1️⃣

Jackson Dhanyel Santin -