🧰 GSAP (GreenSock) · Estudio ← Índice Qué es Características Casos de uso Script Casos reales Referencia

Estudio de GSAP (GreenSock)

Animaciones ⭐ 16k stars
Animaciones de alto rendimiento con API potente y flexible (CSS, SVG y más).

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

1 · Características

2 · Casos de uso

3 · Script minimalista

Instalación: npm i gsap (o CDN)

import gsap from 'gsap';
gsap.to('.caja', { x: 200, duration: 1, ease: 'power2.out' });

4 · Casos de uso (implementación real)

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

1. Stagger de elementos

Anima una lista con retardo escalonado.

import gsap from 'gsap';

gsap.from('.item', {
  opacity: 0, y: 30, duration: 0.5, stagger: 0.08, ease: 'power2.out',
});
🔁 Cómo funciona: `stagger` retrasa cada elemento sucesivo, creando un efecto en cascada.

2. ScrollTrigger

Anima al entrar en el viewport.

import gsap from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';
gsap.registerPlugin(ScrollTrigger);

gsap.to('.seccion', {
  scrollTrigger: { trigger: '.seccion', start: 'top 80%' },
  opacity: 1, y: 0, duration: 1,
});
🔁 Cómo funciona: `ScrollTrigger` dispara la animación cuando el elemento entra en pantalla.

5 · Referencia

CategoríaAnimaciones
Stars (GitHub)⭐ 16k
Sitio oficialhttps://greensock.com/gsap/
GitHubhttps://github.com/greensock/GSAP
Instalaciónnpm i gsap (o CDN)
RelacionadasAnime.js · Velocity.js · ScrollMagic
📦 Regla de librerías (local primero): revisar C:\Users\TUF\Documents\librerías\local\ antes de descargar. Volver al índice de los 66 estudios.