DEV Community

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

Animation libraries for ReactJS ⚛️

Anil Kaundal
Don't ask what the world needs, ask what makes you come alive. Because what the world needs most, is more people who come alive.
・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)

Collapse
zakiazfar profile image
Mohd Ahmad

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