DEV Community

Cover image for Top 15 Animation Libraries for React & Modern Javascript Apps
Syakir
Syakir

Posted on • Originally published at devaradise.com

Top 15 Animation Libraries for React & Modern Javascript Apps

#webdev #javascript #react #beginners

Checkout the original post https://devaradise.com/javascript-react-animation-libraries/ for better navigation with Table of Content.

Animations can take your web applications from good to great by making them more engaging and interactive. They provide visual feedback, guide users through the interface, and add a touch of personality to your projects.

There are a lot of animation libraries from simple, CSS-based libraries to powerful JavaScript libraries capable of creating complex animations. In this article, we’re diving into the top 15 animation libraries for React and modern web apps.

From the well-known React Spring and Framer Motion to specialized libraries like Vivus and Three.js, you'll find something here to make your web projects shine. Let's explore these libraries and see how they can transform your website user experience!

Animation Libraries for General Use cases

1. Animate.css - CSS Animation

Animate.css

Animate.css is a popular CSS library that provides a wide range of pre-defined animations, making it easy to apply animations to any web project. With over 80.2k stars on GitHub and millions of npm downloads, Animate.css is a go-to choice for quick and simple animations.

Installation and Basic Usage 




npm install animate.css
Enter fullscreen mode Exit fullscreen mode 



import 'animate.css';
Enter fullscreen mode Exit fullscreen mode 



<div class="animate_animated animate_bounce">An animated element</div>
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Animate.css is best suited for simple animations that need to be implemented quickly without the need for JavaScript.

Pros

Easy to use, lightweight, large variety of animations.

Cons

Limited to CSS animations, less control over animation behavior.

2. React Spring

React Spring

React Spring is a popular animation library for React, providing a powerful and flexible way to create animations based on spring physics. It has over 27.8k stars on GitHub and is widely used in the community.

Installation and Basic Usage 




npm install @react-spring/web
Enter fullscreen mode Exit fullscreen mode 



import React from 'react';

import { useSpring, animated } from '@react-spring/web';



const App = () => {

    const springs = useSpring({

        from: { x: 0 },

        to: { x: 100 }

    });




<span class="k">return </span><span class="p">(</span>
    <span class="o">&lt;</span><span class="nx">animated</span><span class="p">.</span><span class="nx">div</span>
        <span class="nx">style</span><span class="o">=</span><span class="p">{{</span>
            <span class="na">width</span><span class="p">:</span> <span class="mi">80</span><span class="p">,</span>
            <span class="na">height</span><span class="p">:</span> <span class="mi">80</span><span class="p">,</span>
            <span class="na">background</span><span class="p">:</span> <span class="dl">'</span><span class="s1">#ff6d6d</span><span class="dl">'</span><span class="p">,</span>
            <span class="na">borderRadius</span><span class="p">:</span> <span class="mi">8</span>
        <span class="p">}}</span>
    <span class="sr">/</span><span class="err">&gt;






    Enter fullscreen mode
    


    Exit fullscreen mode
    









    );

};



export default App;
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating complex animations with fine-tuned control over transitions and interactions.

Pros

Highly flexible, supports advanced animations, good community support.

Cons

Learning curve can be steep for beginners.

3. Framer Motion

Framer Motion

Framer Motion is a powerful animation library known for its ease of use and comprehensive features. It has over 22.8k stars on GitHub and is widely praised for its intuitive API.

Installation and Basic Usage 




npm install framer-motion
Enter fullscreen mode Exit fullscreen mode 



import React from 'react';

import { motion } from 'framer-motion';



const App = () => {

    return (

        <motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} transition={{ duration: 1 }}>

            Hello, Framer Motion!

        </motion.div>

    );

};



export default App;
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating smooth and visually appealing animations with minimal code.

Pros

Intuitive API, supports keyframe animations, great documentation.

Cons

Slightly larger bundle size compared to other libraries.

4. Anime.js

Anime.js

Anime.js is a lightweight JavaScript animation library with a powerful API. It has over 49.2k stars on GitHub and is widely used for creating complex and highly customizable animations.

Installation and Basic Usage 




npm install animejs
Enter fullscreen mode Exit fullscreen mode 



import anime from 'animejs/lib/anime.es.js';



anime({

    targets: 'div',

    translateX: 250,

    rotate: '1turn',

    duration: 800

});
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating intricate and detailed animations with precise control.

Pros

Lightweight, versatile, highly customizable.

Cons

Requires JavaScript knowledge, can be complex for simple animations.

5. GSAP (GreenSock Animation Platform)

GSAP

GSAP is a powerful JavaScript animation library known for its high performance and rich feature set. It has over 19.2k stars on GitHub and is widely used in both web and mobile applications.

Installation and Basic Usage 




npm install gsap
Enter fullscreen mode Exit fullscreen mode 



import { gsap } from 'gsap';



gsap.to('.box', { rotation: 27, x: 100, duration: 1 });
Enter fullscreen mode Exit fullscreen mode




Best Use Case

High-performance animations and complex sequences.

Pros

Extremely powerful, robust, high performance.

Cons

Larger bundle size, requires learning time.

6. Popmotion

Popmotion.io

Popmotion is a functional, flexible JavaScript animation library. It powers the animations in Framer Motion. It has over 19.9k stars on GitHub and offers a range of tools for creating animations and interactions.

Installation and Basic Usage 




npm install popmotion
Enter fullscreen mode Exit fullscreen mode 



import { animate } from 'popmotion';



animate({

    from: 0,

    to: 100,

    onUpdate: (latest) => {

        console.log(latest);

    }

});
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating low-level, complex interactions and highly customizable animations.

Pros

Functional API, flexible, scalable and tiny bundle.

Cons

Can be complex for simple use cases.

7. Mo.js

Mo.js

Mo.js is a motion graphics toolbelt for the web. It has over 18.3k stars on GitHub and offers a variety of tools for creating animations.

Installation and Basic Usage 




npm install @mojs/core
Enter fullscreen mode Exit fullscreen mode 



import { Mojs } from '@mojs/core';



const bouncyCircle = new mojs.Shape({

    parent: '#bouncyCircle',

    shape: 'circle',

    fill: { '#F64040': '#FC46AD' },

    radius: { 20: 80 },

    duration: 2000,

    isYoyo: true,

    isShowStart: true,

    easing: 'elastic.inout',

    repeat: 1

});



bouncyCircle.play();
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating complex motion graphics and animations.

Pros

Versatile, powerful, great for motion graphics.

Cons

Steeper learning curve, larger bundle size.

Animation Libraries for Specific Use cases

8. Remotion - Generate Animation Video with React

Remotion

Remotion allows you to create videos programmatically using React. It's a unique library with over 19.6k stars on GitHub, enabling developers to leverage React's power for video content creation.

Installation and Basic Usage 




# new project

npx create-video@latest



# install to existing project

npm i --save-exact remotion@4.0.181 @remotion/cli@4.0.181
Enter fullscreen mode Exit fullscreen mode 



export const MyComposition = () => {

    return null;

};
Enter fullscreen mode Exit fullscreen mode 



import React from 'react';

import {Composition} from 'remotion';

import {MyComposition} from './Composition';

 

export const RemotionRoot: React.FC = () => {

  return (

    <>

      <Composition

        id="Empty"

        component={MyComposition}

        durationInFrames={60}

        fps={30}

        width={1280}

        height={720}

      />

    </>

  );

};
Enter fullscreen mode Exit fullscreen mode 



import { registerRoot } from 'remotion';

import { RemotionRoot } from './Root';

registerRoot(RemotionRoot);
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Programmatically generating videos using React.

Pros

Unique functionality, leverages React skills, powerful video creation capabilities.

Cons

Niche use case, can be complex for beginners.

9. Vivus - SVG Drawing Animation

Vivus

Vivus is a lightweight JavaScript library for animating SVGs. With over 15.1k stars on GitHub, it's a great choice for creating SVG animations.

Installation and Basic Usage 




npm install vivus
Enter fullscreen mode Exit fullscreen mode 



import Vivus from 'vivus';



new Vivus(

    'my-svg',

    {

        type: 'delayed',

        duration: 200,

        animTimingFunction: Vivus.EASE

    },

    myCallback

);



// svg

<object id='my-svg' type='image/svg+xml' data='link/to/my.svg'></object>;
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating drawing animations for SVGs.

Pros

Lightweight, specialized for SVGs, easy to use.

Cons

Limited to SVGs, not suitable for other types of animations.

10. Lottie for Web - Render After Effects Animations

Lottie

Lottie is a library for rendering animations created in Adobe After Effects. With over 29.9k stars on GitHub, it's widely used for integrating complex animations.

Installation and Basic Usage 




npm install lottie-web
Enter fullscreen mode Exit fullscreen mode 



import lottie from 'lottie-web';

import animationData from './animation.json';



lottie.loadAnimation({

    container: document.getElementById('animation'),

    renderer: 'svg',

    loop: true,

    autoplay: true,

    animationData: animationData

});
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Integrating animations created in After Effects.

Pros

High-quality animations, integrates well with After Effects.

Cons

Requires After Effects for animation creation, larger files.

11. ScrollReveal

ScrollReveal

ScrollReveal is a JavaScript library for easily animating elements as they enter or leave the viewport. With over 22.2k stars on GitHub, it's perfect for scroll-based animations.

Installation and Basic Usage 




npm install scrollreveal
Enter fullscreen mode Exit fullscreen mode 



import ScrollReveal from 'scrollreveal';



ScrollReveal().reveal('.box', { delay: 500 });
Enter fullscreen mode Exit fullscreen mode 



<h1 class="headline">Widget Inc.</h1>
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Adding scroll-based reveal animations.

Pros

Easy to use, lightweight, great for scroll animations

Cons

Limited to scroll-based animations.

12. ScrollMagic

ScrollMagic

ScrollMagic is a library for creating scroll interactions and animations. With over 14.8k stars on GitHub, it offers a robust way to handle scroll-based animations.

Installation and Basic Usage 




npm install scrollmagic
Enter fullscreen mode Exit fullscreen mode 



import ScrollMagic from 'scrollmagic';



const controller = new ScrollMagic.Controller();

var controller = new ScrollMagic.Controller();



// create a scene

new ScrollMagic.Scene({

    duration: 100, // the scene should last for a scroll distance of 100px

    offset: 50 // start this scene after scrolling for 50px

})

    .setPin('#my-sticky-element') // pins the element for the the scene's duration

    .addTo(controller); // assign the scene to the controller
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating complex scroll interactions and animations.

Pros

Powerful, flexible, integrates well with GSAP.

Cons

Can be complex for simple animations, larger bundle size.

13. Typed.js

Typed.js

Typed.js is a JavaScript library that types out text, making it look like it's being typed by a human. With over 15.1k stars on GitHub, it's great for adding typing animations.

Installation and Basic Usage 




npm install typed.js
Enter fullscreen mode Exit fullscreen mode 



import Typed from 'typed.js';



const typed = new Typed('#element', {

    strings: ['<i>First</i> sentence.', '&amp; a second sentence.'],

    typeSpeed: 50

});
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating typing animations for text.

Pros

Easy to use, lightweight, great for typing effects.

Cons

Limited to typing animations, less flexibility.

Advanced Animation Libraries

14. Three.js - Advanced JavaScript 3D Library

Three.js

Three.js is a powerful 3D library for JavaScript, allowing you to create complex 3D animations and visualizations. With over 101k stars on GitHub, it's widely used for 3D web applications.

Installation and Basic Usage 




npm install three
Enter fullscreen mode Exit fullscreen mode 



import * as THREE from 'three';



const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);



const renderer = new THREE.WebGLRenderer();

renderer.setSize(window.innerWidth, window.innerHeight);

document.body.appendChild(renderer.domElement);
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating advanced 3D animations and visualizations.

Pros

Extremely powerful, vast community, supports complex 3D scenes.

Cons

Steep learning curve, larger bundle size.

15. Theatre.js

Theatre.js

Theatre.js is an advanced animation library for creating and controlling animations programmatically. With over 11k stars on GitHub, it provides a timeline-based approach for animations.

Installation and Basic Usage 




# r3f and its dependencies

npm install --save react three @react-three/fiber



# Theatre.js

npm install --save @theatre/core@0.5 @theatre/studio@0.5 @theatre/r3f@0.5



# Three.js types (when using Typescript)

npm install --save-dev @types/three
Enter fullscreen mode Exit fullscreen mode 



import * as THREE from 'three'

import { createRoot } from 'react-dom/client'

import React, { useRef, useState } from 'react'

import { Canvas, useFrame } from '@react-three/fiber'

import { getProject } from '@theatre/core'



// our Theatre.js project sheet, we'll use this later

const demoSheet = getProject('Demo Project').sheet('Demo Sheet')



const App = () => {

  return (

    <Canvas

      camera={{

        position: [5, 5, -5],

        fov: 75,

      }}

    >

      <ambientLight />

      <pointLight position={[10, 10, 10]} />

      <mesh>

        <boxGeometry args={[1, 1, 1]} />

        <meshStandardMaterial color="orange" />

      </mesh>

    </Canvas>

  )

}



createRoot(document.getElementById('root')!).render(<App />)
Enter fullscreen mode Exit fullscreen mode




Best Use Case

Creating timeline-based animations with fine control.

Pros

Powerful timeline controls, precise animation sequences.

Cons

Newer library, smaller community, complex for beginners.

Conclusion

Choosing the right animation library depends on your project's needs and complexity. If you're looking for simple, quick animations, CSS-based libraries like Animate.css are ideal. For more complex interactions and high-performance needs, consider powerful libraries like GSAP or Three.js.

Each library has its strengths, so evaluate them based on factors like ease of use, community support, and the specific features you require. You can start experimenting with these top animation libraries before implementing it to your project.

Do you have other libraries worth mentioning? dont hesitate to share them in the comment below!.
If you found this post helpful, share it with your fellow developers and explore more tutorials on this website.

Thank you. Have a good day!

Top comments (24)

Collapse
 
harimanok profile image
Hari Lamichhane •

Amazing read!

We are developing this open-source project to save developer’s time by building copy-paste animated components like shadcn/ui. It’d be cool if you guys have a look!

GitHub: github.com/codse/animata
Website: animata.design

Collapse
 
syakirurahman profile image
Syakir • • Edited

I just looked into it, and gave it a star. Really cool project. Surely it add more options for animation libraries. Thanks for sharing, Hari. Keep up the good work!.

Collapse
 
harimanok profile image
Hari Lamichhane •

Will do! thank you.

Collapse
 
diesos profile image
Omer Ozturk •

I discovered your works, and it's amazing. I gave you a star 🔥

Collapse
 
best_codes profile image
Best Codes •

I love it! I might use it on some projects soon.

Collapse
 
syakirurahman profile image
Syakir •

This post got more views than my previous post, but no single comment :')

Collapse
 
scorcism profile image
Abhishek Pathak •

you got one 🌻

Collapse
 
syakirurahman profile image
Syakir •

Thank you, you are the savior! 😂

Collapse
 
cofo profile image
cofo •

I can feel your pain. So here I am. I don’t have any burger for you but the comment is here> Thank you for sharing this post. Some tools are really cool!

Collapse
 
leob profile image
leob • • Edited

Great article - not just your average "listicle", but code examples, context, pros and cons, even some guidance on how to choose a lib - compare this for example to dev.to/hosseinyazdi/20-super-usefu... which provides none of that (only a list, minimal descriptions, no context) ...

Kudos, you've really put in the work, this is the kind of content we want to see on dev.to (well I do, at least) !

Collapse
 
syakirurahman profile image
Syakir •

Thanks for your kind words!
Although you dont have to compare it to other similar article 😅

Collapse
 
leob profile image
leob •

Well I don't have to ... but it's the truth :D

Collapse
 
annavi11arrea1 profile image
Anna Villarreal •

three.js is sick

Collapse
 
syakirurahman profile image
Syakir •

Have you tried it in real project? I would like to know because it looks intimidating for beginners 😂

Collapse
 
guttenbergovitz profile image
Guttenbergovitz •

you mean :: Awesome?

Collapse
 
chandra_pantachhetri profile image
Chandra Panta Chhetri • • Edited

I like how you listed the pros & cons & best use case. Which one is your go to usually? Mine is Framer motion if I need more control & Animate.css for simple animations. I will check out the others one though, I love animations!

Also three.js I try to wrap my head around it, it just goes over :))

Collapse
 
alyouma_akmal_5a4d549d061 profile image
alyouma akmal •

If you react JS user, i recomended try framer-motion.

Collapse
 
syakirurahman profile image
Syakir •

Yeah, framer motion is great!

Collapse
 
dusty_sameer profile image
D Sameer •

Awesome read Muhammad ✨ got to know.

Collapse
 
syakirurahman profile image
Syakir •

Thanks, hope it helps 😁

Collapse
 
fabiospoto profile image
Fabio Spoto •

Wow! Thank you so much for this :)

Collapse
 
hieungocnguyen profile image
Hieu Nguyen •

Good list. Thank you

Collapse
 
syakirurahman profile image
Syakir •

No problem. Happy to help

Collapse
 
adebimpe_adetomiwa profile image
Adebimpe Adetomiwa •

Good read

View full discussion (24 comments)

Read next

steve8708 profile image

Turn a Figma Dropdown Design Into Working React Code in 1 Minute

Steve Sewell -

mikeyoung44 profile image

A beginner's guide to the Stable-Diffusion-V1-4 model by Compvis on Huggingface

Mike Young -

tools-ai profile image

Top 5 Free Static Website Hosting Platforms I Love

Jenny C -

techcreator_usa profile image

How does WebAssembly enhance web application performance?

Techcreator USA -