Estudio de Anime.js

Animaciones ⭐ 45k stars
Animaciones potentes y flexibles de cualquier propiedad CSS, SVG o de objetos JS.

🤖 Skill de implementación: frontend-desarrollo (regla: solo catálogo de las 66 · versiones por ERR/MEJ)

1 · Características

Control total sobre tiempo y movimiento
Animaciones de línea de tiempo
Manipulación de atributos de SVG

2 · Casos de uso

Animaciones para interfaces de usuario
Juegos y actividades interactivas
Efectos para marketing

3 · Script minimalista

Instalación: npm i animejs (o CDN)

import anime from 'animejs';
anime({ targets: '.caja', translateX: 250, duration: 800, easing: 'easeInOutQuad' });

4 · Casos de uso (implementación real)

Dos casos de uso comunes implementados con esta librería.

1. Animación al hover

Mueve y escala una tarjeta al pasar el ratón.

import anime from 'animejs';

const el = document.querySelector('.carta');
el.addEventListener('mouseenter', () =>
  anime({ targets: el, translateY: -12, scale: 1.05, duration: 300, easing: 'easeOut' }));
el.addEventListener('mouseleave', () =>
  anime({ targets: el, translateY: 0, scale: 1, duration: 300, easing: 'easeIn' }));

🔁 Cómo funciona: Dos animaciones opuestas (enter/leave) sobre la misma tarjeta con easing suave.

2. Timeline en secuencia

Encadena animaciones en orden.

import anime from 'animejs';

const tl = anime.timeline();
tl.add({ targets: '.a', translateX: 100, duration: 500 })
  .add({ targets: '.b', opacity: 1, duration: 400 })
  .add({ targets: '.c', scale: 1.5, duration: 300 });

🔁 Cómo funciona: `anime.timeline()` ejecuta cada `add` cuando termina el anterior.

5 · Referencia

Categoría	Animaciones
Stars (GitHub)	⭐ 45k
Sitio oficial	https://animejs.com/
GitHub	https://github.com/juliangarnier/anime
Instalación	`npm i animejs (o CDN)`
Relacionadas	GSAP · Mo.js · Velocity.js

📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.