Skip to content

Web Animation Libraries Cheat Sheet

JavaScript Animation Libraries

GSAP

Industry-leading high-performance animation library, supporting CSS properties, SVG, Canvas, etc., seamlessly integrating with React, Vue, and other frameworks.

  • Features: High performance, easy to use, powerful, supports timelines

  • Installation: npm install gsap

  • Usage:

    import { gsap } from "gsap";

gsap.to(".box", { duration: 2, x: 100 });

Anime.js

Lightweight JavaScript animation library, supporting CSS properties, SVG, DOM properties, and JavaScript object animation.

  • Features: Simple to use, lightweight, supports multiple animation types

  • Installation: npm install animejs

  • Usage:

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

anime({
  targets: '.box',
  translateX: 250,
  duration: 2000
});

Velocity.js

Combines the ease of use of jQuery with the high performance of CSS, supporting animation queues and contextual elements.

  • Features: Animation queue, contextual elements, easy to use

  • Installation: npm install velocity-animate

  • Usage:

    import velocity from 'velocity-animate';

velocity(document.querySelector(".box"), { translateX: 250 }, { duration: 2000 });

CSS Animation Libraries

Animate.css

A CSS animation library with rich animation effects, achievable simply by adding class names.

  • Features: Rich animation effects, simple to use, good compatibility

  • Installation: npm install animate.css --save

  • Usage:

    <link rel="stylesheet" href="animate.css">
<div class="animated bounce">Hello World!</div>

Hover.css

A button hover effects library implemented solely with CSS3, containing a variety of hover effects.

  • Features: Rich effects, implemented solely with CSS3, easy to use

  • Installation: npm install hover.css

  • Usage:

    <link rel="stylesheet" href="hover.css">
<a class="hvr-grow">Grow</a>

CSShake

A collection of CSS3 animation classes for creating shake, wobble, and other effects.

  • Features: Unique animation effects, implemented solely with CSS3, easy to use

  • Installation: npm install csshake

  • Usage:

    <link rel="stylesheet" href="csshake.css">
<div class="shake-little">Shake it!</div>