Skip to content

Hoja de Referencia de Librerías de Animación Web

Librerías de animación de JavaScript

GSAP

Librería de animación de alto rendimiento líder en la industria, compatible con propiedades CSS, SVG, Canvas, etc., que se integra perfectamente con frameworks como React y Vue.

  • Características: Alto rendimiento, fácil de usar, potente, compatible con líneas de tiempo

  • Instalación: npm install gsap

  • Uso:

    import { gsap } from "gsap";

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

Anime.js

Librería de animación de JavaScript ligera, compatible con propiedades CSS, SVG, propiedades DOM y animación de objetos JavaScript.

  • Características: Simple de usar, ligera, compatible con múltiples tipos de animación

  • Instalación: npm install animejs

  • Uso:

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

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

Velocity.js

Combina la facilidad de uso de jQuery con el alto rendimiento de CSS, con soporte para colas de animación y elementos contextuales.

  • Características: Colas de animación, elementos contextuales, fácil de usar

  • Instalación: npm install velocity-animate

  • Uso:

    import velocity from 'velocity-animate';

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

Librerías de animación CSS

Animate.css

Una librería de animación CSS con una gran variedad de efectos, que se pueden implementar simplemente añadiendo nombres de clase.

  • Características: Gran variedad de efectos de animación, uso sencillo, buena compatibilidad

  • Instalación: npm install animate.css --save

  • Uso:

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

Hover.css

Una librería de efectos de desplazamiento de botones implementada únicamente con CSS3, que contiene diversos efectos de desplazamiento.

  • Características: Múltiples efectos, implementada solo con CSS3, fácil de usar

  • Instalación: npm install hover.css

  • Uso:

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

CSShake

Un conjunto de clases de animación CSS3 para crear efectos de sacudida, balanceo y otros.

  • Características: Efectos de animación únicos, implementados solo con CSS3, fáciles de usar

  • Instalación: npm install csshake

  • Uso:

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