Animations are important in instances like page transitions, scroll events, entering and exiting components, and events that the user should be alerted to.
If you are a web developer using React.js then these might just come in handy for you whether you are building an app or website using static generators.
In this article, we’ll take a look at some of the popular animation libraries that can be integrated with React for interactive and attractive web pages.
The Libraries:
Framer Motion
GreenSock ( GSAP 3)
React Spring
Framer Motion
A production-ready motion library for React. Utilize the power behind Framer, the best prototyping tool for teams. It is quite popular and lots of people have been adapting and using it, the statistics for that is clear with almost 500k weekly downloads and the 11k stars on GitHub.
It is easy to get started with and has a bit of a learning curve like with all other libraries.
Installation
npm install framer-motion
Platforms
All modern browsers Edge, Chrome, Firefox and upto IE 11.
It does all this:
- Spring animations
- Simple keyframes syntax
- Gestures (drag/tap/hover)
- Layout and shared layout animations
- SVG paths
- Exit animations
- Server-side rendering
- Variants for orchestrating animations across components
CSS variables and more...
Bundle Analysis
- Minified 98.2kB
- Minified + Gzipped 32kb
GreenSock
GreenSock Animation Platform also known as GSAP is an Ultra high-performance, professional-grade animation for the modern web that allows developers to animate their apps in a modular, declarative, and re-usable fashion. It is framework-agnostic and can be used across any JavaScript based project, it has a very minimal bundle size and will not bloat your app.
GSAP can perform canvas animations, used to create WebGL experiences, and create dynamic SVG animations and as great browser support.
It can animate anything that JavaScript can touch (CSS properties, SVG, React, canvas, generic objects, whatever) and solves countless browser inconsistencies, all with blazing speed (up to 20x faster than jQuery).
I have been using GreenSock Animation Platform aka GSAP for quite sometime and have always been impressed with how easy it is to use and also the controls they provide. With the new iteration of GSAP 3 the library is even more lightweight and the new API is simpler to use.
It has a collection of plugins that you can addon and use with the core library.
Installation
npm
npm i gsap
cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.1/gsap.min.js"></script>
Platforms
It is compatible with all modern browsers.. Firefox, Chrome, Opera, Safari, and even IE. It even works in IE6. GreenSock GSAP can animate any numerical JavaScript property or object. As long as that modern browser supports that CSS or JavaScript property, GSAP can animate it.
Bundle Analysis
- Minified 59.6kb
- Minified + Gzipped 23.2kb
For an idea of what all is achievable with this, go through these:
React Spring
react-spring is a modern animation library that is based on spring physics. It’s highly flexible and covers most animations needed for a user interface. react-spring inherits some properties from React Motion, such as ease of use, interpolation, and performance.
Install
yarn add react-spring
Platforms
@react-spring/konva
@react-spring/native
@react-spring/three
@react-spring/web
@react-spring/zdog
Browser Support
The library comes as an es-module compiled for evergreen browsers with the following browser list config >1%, not dead, not ie 11, not op_mini all . If you need to support legacy targets or deal with targets that don't support modules, you can use the commonJS export by simply appending .cjs to your imports.
Bundle Analysis
- Minified 49kb
- Minified + Gzipped 17.9kb
NPM Trends comparison
