Skip to content

Web Animation Libraries Cheat Sheet

JavaScript-animationsbibliotek

GSAP

Branschledande högpresterande animationsbibliotek som stöder CSS-egenskaper, SVG, Canvas etc. och integreras sömlöst med ramverk som React och Vue.

  • Egenskaper: Hög prestanda, enkel att använda, kraftfull, stöder tidslinjer

  • Installation: npm install gsap

  • Användning:

    import { gsap } from "gsap";

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

Anime.js

Lättvikts JavaScript-animationsbibliotek som stöder CSS-egenskaper, SVG, DOM-egenskaper och JavaScript-objektanimering.

  • Egenskaper: Enkel att använda, lätt, stöder flera animationstyper

  • Installation: npm install animejs

  • Användning:

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

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

Velocity.js

Kombinerar det enkla med jQuery med den höga prestandan i CSS, stöder animationsköer och kontextelement.

  • Egenskaper: Animationsköer, kontextelement, enkel att använda

  • Installation: npm install velocity-animate

  • Användning:

    import velocity from 'velocity-animate';

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

CSS-animationsbibliotek

Animate.css

Ett CSS-animationsbibliotek med rika animationseffekter som kan implementeras genom att bara lägga till klassnamn.

  • Egenskaper: Rika animationseffekter, enkel användning, god kompatibilitet

  • Installation: npm install animate.css --save

  • Användning:

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

Hover.css

Ett bibliotek för knapp-hover-effekter implementerat med enbart CSS3, innehåller en mängd olika hover-effekter.

  • Egenskaper: Rika effekter, enbart CSS3-implementering, enkel att använda

  • Installation: npm install hover.css

  • Användning:

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

CSShake

En uppsättning CSS3-animationsklasser för att skapa skakningar, vibrationer och andra effekter.

  • Egenskaper: Unika animationseffekter, enbart CSS3-implementering, enkel att använda

  • Installation: npm install csshake

  • Användning:

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