Rendimiento de GSAP
Cuándo usar este skill
Aplica al optimizar animaciones GSAP para lograr 60fps suaves, reducir el costo de layout/pintura, o cuando el usuario pregunte sobre rendimiento, jank o mejores prácticas para animaciones rápidas.
Skills relacionados: Construye animaciones con gsap-core (transforms, autoAlpha) y gsap-timeline; para rendimiento de ScrollTrigger consulta gsap-scrolltrigger.
Preferir Transform y Opacity
Animar transform (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) y opacity mantiene el trabajo en el compositor y evita layout y la mayor parte de la pintura. Evita animar propiedades pesadas de layout cuando un transform puede lograr el mismo efecto.
- ✅ Preferir: x, y, scale, rotation, opacity.
- ❌ Evitar cuando sea posible: width, height, top, left, margin, padding (desencadenan layout y pueden causar jank).
GSAP usa x e y con transform (translate) por defecto; úsalos en lugar de left/top para movimiento.
will-change
Usa will-change en CSS en los elementos que animarás. Le indica al navegador que promueva la capa.
will-change: transform;
Agrupar lecturas y escrituras
GSAP agrupa las actualizaciones internamente. Al mezclar GSAP con lecturas/escrituras directas del DOM o código dependiente de layout, evita intercalar lecturas y escrituras de manera que causen thrashing repetido de layout. Prefiere hacer todas las lecturas primero, luego todas las escrituras (o deja que GSAP maneje las escrituras de una sola vez).
Muchos elementos (Stagger, listas)
- Usa stagger en lugar de múltiples tweens separados con retrasos manuales cuando la animación es la misma; es más eficiente.
- Para listas largas, considera virtualización o animar solo los elementos visibles; evita crear cientos de tweens simultáneos si causa jank.
- Reutiliza timelines cuando sea posible; evita crear nuevas timelines en cada frame.
Propiedades actualizadas frecuentemente (ej. seguidores del mouse)
Prefiere gsap.quickTo() para propiedades que se actualizan a menudo (ej. x/y de un seguidor del mouse). Reutiliza un solo tween en lugar de crear nuevos tweens en cada actualización.
let xTo = gsap.quickTo("#id", "x", { duration: 0.4, ease: "power3" }),
yTo = gsap.quickTo("#id", "y", { duration: 0.4, ease: "power3" });
document.querySelector("#container").addEventListener("mousemove", (e) => {
xTo(e.pageX);
yTo(e.pageY);
});
ScrollTrigger y rendimiento
- pin: true promueve el elemento fijado; fija solo lo necesario.
- scrub con un valor pequeño (ej.
scrub: 1) puede reducir trabajo durante el scroll; prueba en dispositivos de gama baja. - Llama a ScrollTrigger.refresh() solo cuando el layout realmente cambie (ej. después de cargar contenido), no en cada redimensión; usa debounce cuando sea posible.
Reducir trabajo simultáneo
- Pausa o elimina animaciones fuera de pantalla o inactivas cuando no son visibles (ej. cuando el usuario navega a otra pestaña).
- Evita animar un gran número de propiedades en muchos elementos a la vez; simplifica o secuencia si es necesario.
Mejores prácticas
- ✅ Animar transform y opacity; usa will-change en CSS solo en elementos que animas.
- ✅ Usa stagger en lugar de múltiples tweens separados con retrasos manuales cuando la animación es la misma.
- ✅ Usa gsap.quickTo() para propiedades actualizadas frecuentemente (ej. seguidores del mouse).
- ✅ Limpia o elimina animaciones fuera de pantalla; llama a ScrollTrigger.refresh() cuando el layout cambie, con debounce cuando sea posible.
No hacer
- ❌ Animar width/height/top/left para movimiento cuando x/y/scale pueden lograr el mismo aspecto.
- ❌ Establecer will-change o force3D en cada elemento "por si acaso"; úsalos solo en elementos que realmente están animando.
- ❌ Crear cientos de tweens o ScrollTriggers superpuestos sin probar en dispositivos de gama baja.
- ❌ Ignorar la limpieza; los tweens y ScrollTriggers huérfanos siguen ejecutándose y pueden perjudicar el rendimiento y la corrección.