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

blamsa0mine profile image

Building an Interactive Budget Calculator with Streamlit 🚀

A0mineTV -

djangotricks profile image

HTTPS for Django Development Environment

Aidas Bendoraitis -

sharathchandark profile image

Unlock Security: OTP Generator with Email Verification using JavaScript

sharathchandark -

lymestack profile image

Implementing Auth in .NET WebApi & SPAs: Why is it still so painful?

Michael Joseph -