Skip to content

Biblioteki animacji internetowych Cheat Sheet

Biblioteki animacji JavaScript

GSAP

Wiodąca w branży, wysokowydajna biblioteka animacji, obsługująca właściwości CSS, SVG, Canvas itp., płynnie integrująca się z frameworkami takimi jak React czy Vue.

  • Cechy: Wysoka wydajność, łatwość użycia, potężne możliwości, obsługa osi czasu (timelines)

  • Instalacja: npm install gsap

  • Użycie:

    import { gsap } from "gsap";

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

Anime.js

Lekka biblioteka animacji JavaScript, obsługująca właściwości CSS, SVG, właściwości DOM i animacje obiektów JavaScript.

  • Cechy: Prosta w użyciu, lekka, obsługuje wiele typów animacji

  • Instalacja: npm install animejs

  • Użycie:

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

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

Velocity.js

Łączy łatwość użycia jQuery z wysoką wydajnością CSS, obsługując kolejki animacji i elementy kontekstowe.

  • Cechy: Kolejki animacji, elementy kontekstowe, łatwość użycia

  • Instalacja: npm install velocity-animate

  • Użycie:

    import velocity from 'velocity-animate';

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

Biblioteki animacji CSS

Animate.css

Biblioteka animacji CSS z bogatym zestawem efektów, które można uzyskać poprzez proste dodanie nazw klas.

  • Cechy: Bogate efekty animacji, proste użycie, dobra kompatybilność

  • Instalacja: npm install animate.css --save

  • Użycie:

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

Hover.css

Biblioteka efektów najechania kursorem na przyciski zaimplementowana wyłącznie przy użyciu CSS3, zawierająca różnorodne efekty hover.

  • Cechy: Bogate efekty, zaimplementowana tylko w CSS3, łatwa w użyciu

  • Instalacja: npm install hover.css

  • Użycie:

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

CSShake

Zestaw klas animacji CSS3 służących do tworzenia efektów potrząsania, drgania itp.

  • Cechy: Unikalne efekty animacji, zaimplementowana tylko w CSS3, łatwa w użyciu

  • Instalacja: npm install csshake

  • Użycie:

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