Skip to content

Folha de Atalhos de Bibliotecas de Animação Web

Bibliotecas de Animação JavaScript

GSAP

Biblioteca de animação de alto desempenho líder do setor, com suporte para propriedades CSS, SVG, Canvas, etc., integrando-se perfeitamente com frameworks como React e Vue.

  • Características: Alto desempenho, fácil de usar, poderosa, suporta linhas de tempo (timelines)

  • Instalação: npm install gsap

  • Uso:

    import { gsap } from "gsap";

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

Anime.js

Biblioteca de animação JavaScript leve, com suporte para propriedades CSS, SVG, propriedades DOM e animação de objetos JavaScript.

  • Características: Simples de usar, leve, suporta múltiplos tipos de animação

  • Instalación: npm install animejs

  • Uso:

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

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

Velocity.js

Combina a facilidade de uso do jQuery com o alto desempenho do CSS, suportando filas de animação e elementos de contexto.

  • Características: Filas de animação, elementos de contexto, fácil de usar

  • Instalação: npm install velocity-animate

  • Uso:

    import velocity from 'velocity-animate';

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

Bibliotecas de Animação CSS

Animate.css

Uma biblioteca de animação CSS rica em efeitos, que pode ser implementada apenas adicionando nomes de classes.

  • Características: Efeitos de animação ricos, uso simples, boa compatibilidade

  • Instalação: npm install animate.css --save

  • Uso:

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

Hover.css

Uma biblioteca de efeitos de foco de botão implementada apenas com CSS3, contendo uma variedade de efeitos de foco.

  • Características: Efeitos ricos, implementada apenas com CSS3, fácil de usar

  • Instalação: npm install hover.css

  • Uso:

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

CSShake

Um conjunto de classes de animação CSS3 para criar efeitos de agitação, oscilação, etc.

  • Características: Efeitos de animação únicos, implementada apenas com CSS3, fácil de usar

  • Instalação: npm install csshake

  • Uso:

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