Skip to content

Web-Animationsbibliotheken Spickzettel

JavaScript-Animationsbibliotheken

GSAP

Branchenführende Hochleistungs-Animationsbibliothek, die CSS-Eigenschaften, SVG, Canvas usw. unterstützt und sich nahtlos in Frameworks wie React, Vue integrieren lässt.

  • Merkmale: Hohe Performance, benutzerfreundlich, leistungsstark, unterstützt Timelines

  • Installation: npm install gsap

  • Verwendung:

    import { gsap } from "gsap";

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

Anime.js

Leichtgewichtige JavaScript-Animationsbibliothek, die CSS-Eigenschaften, SVG, DOM-Eigenschaften und JavaScript-Objekt-Animationen unterstützt.

  • Merkmale: Einfach zu bedienen, leichtgewichtig, unterstützt verschiedene Animationstypen

  • Installation: npm install animejs

  • Verwendung:

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

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

Velocity.js

Kombiniert die Benutzerfreundlichkeit von jQuery mit der hohen Performance von CSS, unterstützt Animationswarteschlangen und Kontextelemente.

  • Merkmale: Animationswarteschlangen, Kontextelemente, einfach zu bedienen

  • Installation: npm install velocity-animate

  • Verwendung:

    import velocity from 'velocity-animate';

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

CSS-Animationsbibliotheken

Animate.css

Eine CSS-Animationsbibliothek mit einer Vielzahl von Effekten, die einfach durch Hinzufügen von Klassennamen implementiert werden können.

  • Merkmale: Reiche Auswahl an Animationseffekten, einfache Anwendung, gute Kompatibilität

  • Installation: npm install animate.css --save

  • Verwendung:

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

Hover.css

Eine Bibliothek für Hover-Effekte auf Buttons, die ausschließlich mit CSS3 realisiert wurde und diverse Effekte enthält.

  • Merkmale: Vielfältige Effekte, nur mit CSS3 realisiert, einfach zu bedienen

  • Installation: npm install hover.css

  • Verwendung:

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

CSShake

Eine Sammlung von CSS3-Animationsklassen zur Erstellung von Shake-, Wobble- und ähnlichen Effekten.

  • Merkmale: Einzigartige Animationseffekte, nur mit CSS3 realisiert, einfach zu bedienen

  • Installation: npm install csshake

  • Verwendung:

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