DEV Community

loading...
Cover image for Animation libraries for ReactJS ⚛️

Animation libraries for ReactJS ⚛️

anilkaundal profile image Anil Kaundal ・1 min read

Make your websites and applications more interactive and aesthetically pleasing by using these ⬇️ ReactJS animation libraries.

React Reveal

React Reveal is based on one of the popular CSS animation library animation.css. It is primarily a reveal animation library i.e. it is used to show and/or hide DOM Elements.

npm i react-reveal
Enter fullscreen mode Exit fullscreen mode

Framer Motion

Framer Motion is a JavaScript library built by the team at Framer. It's a relatively new library and is one of the easiest, feature-rich & production-ready, animation and gesture libraries.

npm i framer-motion
Enter fullscreen mode Exit fullscreen mode

React Spring

React Spring is inspired by react-motion and provides a very much similar approach to animation design. It attempts to improve
performance over react-motion.

npm i react-spring
Enter fullscreen mode Exit fullscreen mode

React Anime

React Anime as the name suggests is a React Wrapper for one of the popular animation library Anime.js. All Anime.js functionalities wrapped into their declarative form.

npm i react-anime
Enter fullscreen mode Exit fullscreen mode

Bodymovin

Bodymovin and Lottie allow you to run your JSON-exported After Effects animations on the web, React Native, Android, iOS and macOS. The React Wrapper lets you use it with React.js

npm i react-bodymovin
Enter fullscreen mode Exit fullscreen mode

Thank you for reading this 🎉

Discussion (1)

pic
Editor guide
Collapse
zakiazfar profile image
zakiAzfar

GSAP is also great, and btw framer-motion is the best for react