Skip to content

Cheat Sheet Biblioteci Animație Web

Biblioteci de animație JavaScript

GSAP

Biblioteca de animație de înaltă performanță lider în industrie, care suportă proprietăți CSS, SVG, Canvas etc., integrându-se perfect cu framework-uri precum React și Vue.

  • Caracteristici: Performanță ridicată, ușor de utilizat, puternic, suportă timeline-uri

  • Instalare: npm install gsap

  • Utilizare:

    import { gsap } from "gsap";

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

Anime.js

O bibliotecă de animație JavaScript ușoară, care suportă proprietăți CSS, SVG, proprietăți DOM și animație pentru obiecte JavaScript.

  • Caracteristici: Simplu de utilizat, ușoară, suportă multiple tipuri de animație

  • Instalare: npm install animejs

  • Utilizare:

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

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

Velocity.js

Combină ușurința în utilizare a jQuery cu performanța înaltă a CSS, suportând cozi de animație și elemente contextuale.

  • Caracteristici: Cozi de animație, elemente contextuale, ușor de utilizat

  • Instalare: npm install velocity-animate

  • Utilizare:

    import velocity from 'velocity-animate';

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

Biblioteci de animație CSS

Animate.css

O bibliotecă de animație CSS bogată în efecte, care pot fi realizate prin simpla adăugare a numelor de clase.

  • Caracteristici: Efecte de animație bogate, utilizare simplă, compatibilitate bună

  • Instalare: npm install animate.css --save

  • Utilizare:

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

Hover.css

O bibliotecă de efecte de tip hover pentru butoane implementată exclusiv cu CSS3, conținând o varietate de efecte de hover.

  • Caracteristici: Efecte variate, implementată doar cu CSS3, ușor de utilizat

  • Instalare: npm install hover.css

  • Utilizare:

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

CSShake

Un set de clase de animație CSS3 pentru crearea de efecte de scuturare, tremurare etc.

  • Caracteristici: Efecte de animație unice, implementată doar cu CSS3, ușor de utilizat

  • Instalare: npm install csshake

  • Utilizare:

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