Skip to content

Cheat Sheet delle librerie di animazione Web

Librerie di animazione JavaScript

GSAP

Libreria di animazione ad alte prestazioni leader del settore, che supporta proprietà CSS, SVG, Canvas, ecc., integrandoci perfettamente con framework come React e Vue.

  • Caratteristiche: Alte prestazioni, facile da usare, potente, supporta le timeline

  • Installazione: npm install gsap

  • Utilizzo:

    import { gsap } from "gsap";

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

Anime.js

Libreria di animazione JavaScript leggera, che supporta proprietà CSS, SVG, proprietà DOM e animazione di oggetti JavaScript.

  • Caratteristiche: Semplice da usare, leggera, supporta vari tipi di animazione

  • Installazione: npm install animejs

  • Utilizzo:

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

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

Velocity.js

Combina la facilità d’uso di jQuery con le alte prestazioni del CSS, supportando code di animazione ed elementi di contesto.

  • Caratteristiche: Code di animazione, elementi di contesto, facile da usare

  • Installazione: npm install velocity-animate

  • Utilizzo:

    import velocity from 'velocity-animate';

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

Librerie di animazione CSS

Animate.css

Una libreria di animazioni CSS con una ricca varietà di effetti, implementabili semplicemente aggiungendo nomi di classi.

  • Caratteristiche: Ricca varietà di effetti di animazione, uso semplice, buona compatibilità

  • Installazione: npm install animate.css --save

  • Utilizzo:

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

Hover.css

Una libreria di effetti hover per pulsanti implementata esclusivamente con CSS3, contenente una varietà di effetti di scorrimento.

  • Caratteristiche: Varietà di effetti, implementata solo con CSS3, facile da usare

  • Installazione: npm install hover.css

  • Utilizzo:

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

CSShake

Un insieme di classi di animazione CSS3 per creare effetti di scuotimento, oscillazione e altri.

  • Caratteristiche: Effetti di animazione unici, implementati solo con CSS3, facile da usare

  • Installazione: npm install csshake

  • Utilizzo:

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