GSAP

¿Por qué elegir GSAP?

CSS gestiona bien las transiciones simples y los keyframes; para un efecto de hover o un fade-in, es la herramienta adecuada. Sin embargo, en el momento en que necesitas coordinar varios elementos, vincular animaciones al scroll o controlar la reproducción de forma dinámica, CSS se vuelve incómodo. Ahí es donde GSAP (GreenSock Animation Platform) destaca.

GSAP te ofrece una API pequeña y expresiva para animar valores a lo largo del tiempo, y un modelo de timeline para secuenciarlos. Se ejecuta en requestAnimationFrame, anima de manera eficiente y su ecosistema de plugins cubre el scrolling, el dragging, el morphing y mucho más. Para sitios de marketing pulidos, tours de producto y storytelling de datos, es el estándar.

Tweens

Un tween cambia una o más propiedades a lo largo de una duración.

// tweens.js
import gsap from "gsap";

gsap.to(".box", { x: 200, duration: 1, ease: "power2.out" });
gsap.from(".title", { y: 40, opacity: 0, duration: 0.8 });
gsap.fromTo(".card", { scale: 0.8 }, { scale: 1, duration: 0.4 });

to anima hacia un valor, from anima desde un valor hasta el estado actual, y fromTo especifica ambos. GSAP maneja las transformaciones (x, y, scale, rotation) de forma nativa, que son las propiedades que permanecen en el compositor y mantienen la animación fluida.

Timelines

Un timeline secuencia tweens en un reloj compartido, utilizando parámetros de posición que permiten una precisión exacta en el timing.

// timeline.js
const tl = gsap.timeline({ defaults: { ease: "power3.out" } });

tl.from(".nav", { y: -20, opacity: 0 })
  .from(".hero h1", { y: 40, opacity: 0 }, "-=0.3")
  .from(".hero p", { y: 20, opacity: 0 }, "-=0.2")
  .from(".hero button", { scale: 0.9, opacity: 0 }, "-=0.2");

El "-=0.3" significa “comenzar 0.3 segundos antes de que termine el tween anterior”, lo que solapa los pasos para lograr un flujo más natural. Los timelines se pueden pausar, invertir, acelerar, buscar puntos específicos y etiquetar, lo que los hace mucho más controlables que una cadena de llamadas a setTimeout. También simplifican la limpieza: basta con eliminar el timeline y todos los tweens se detendrán.

Stagger y easing

El stagger desplaza la misma animación a través de múltiples objetivos, lo cual es la clave para lograr esos efectos pulidos en listas y cuadrículas que ves en los sitios modernos.

// stagger.js
gsap.from(".card", {
  y: 30,
  opacity: 0,
  duration: 0.5,
  stagger: 0.08,
});

El easing controla la sensación del movimiento. power2.out comienza rápido y se estabiliza, back.out se sobrepasa ligeramente y elastic rebota. El easing de GSAP es uno de sus puntos fuertes y es difícil de igualar utilizando únicamente CSS.

ScrollTrigger

ScrollTrigger vincula las animaciones a la posición del scroll, permitiendo crear esa narrativa impulsada por el desplazamiento que define a muchos sitios web premiados.

// scroll.js
import gsap from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

gsap.to(".panel", {
  xPercent: -100,
  ease: "none",
  scrollTrigger: {
    trigger: ".panels",
    start: "top top",
    end: "+=2000",
    scrub: true,
    pin: true,
  },
});

scrub: true vincula el progreso de la animación a la barra de desplazamiento, y pin: true mantiene la sección fija en su lugar mientras se hace scroll. ScrollTrigger también es compatible con snap, toggles y callbacks, y gestiona automáticamente el redimensionamiento y la actualización (refresh) por ti.

Rendimiento

El movimiento debe sentirse fluido, y eso significa animar las propiedades adecuadas.

• Anima transform y opacity, ya que el compositor puede manejarlas sin necesidad de recalcular el layout.
• Evita animar width, height, top, left o margin, ya que fuerzan el layout en cada frame.
• Anima menos elementos a la vez y pausa las animaciones que estén fuera de la pantalla.
• Usa will-change con moderación en los elementos que estén a punto de animarse.
• Destruye las timelines cuando un componente se desmonte para evitar fugas de memoria y trabajo innecesario.

Consulta la guía de Web Performance para saber cómo interactúan las animaciones con métricas como el INP.

React y la limpieza

El hook oficial useGSAP de @gsap/react limita los selectores a un contenedor y realiza la limpieza automáticamente, lo que evita los errores comunes al animar el DOM gestionado por React.

// Hero.jsx
import { useRef } from "react";
import { useGSAP } from "@gsap/react";
import gsap from "gsap";

export function Hero() {
  const ref = useRef(null);

  useGSAP(() => {
    gsap.from(".title", { y: 40, opacity: 0 });
  }, { scope: ref });

  return <section ref={ref}><h1 className="title">Hello</h1></section>;
}

El hook gestiona la doble invocación de StrictMode y revierte las animaciones al desmontar el componente, evitando así fugas de tweens o que los elementos queden en un estado parcialmente animado.

Accesibilidad

Respeta siempre prefers-reduced-motion. Para los usuarios con sensibilidad al movimiento, sustituye el desplazamiento por un desvanecimiento simple o elimina la animación por completo.

// reduced.js
const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".card", { y: 30, opacity: 0, stagger: 0.08 });
});

mm.add("(prefers-reduced-motion: reduce)", () => {
  gsap.from(".card", { opacity: 0 });
});

Se trata de una pequeña cantidad de código que marca una diferencia real para un grupo significativo de usuarios.

Mejores prácticas

• Usa timelines en lugar de timeouts encadenados para cualquier secuencia.
• Anima transform y opacity, no las propiedades de layout.
• Aplica stagger a las listas para lograr un efecto más pulido y natural.
• Registra los plugins una sola vez y reutilízalos.
• Limpia las timelines al desmontar el componente, especialmente en React.
• Respeta la preferencia prefers-reduced-motion.
• Pausa o detén las animaciones que estén fuera de pantalla.

Errores comunes

• Animar propiedades de layout, lo que provoca jank.
• Encadenar llamadas a setTimeout que se desincronizan y son difíciles de cancelar.
• Dejar timelines ejecutándose después de que un componente se desmonte.
• Usar motion en exceso hasta que la página se siente saturada.
• Ignorar las preferencias de reduced-motion.
• Ejecutar animaciones de scroll pesadas en dispositivos de baja potencia sin realizar pruebas.

Próximos pasos

GSAP convierte la animación de una tarea tediosa en una herramienta de diseño. Comienza con las bases de las animaciones CSS para saber cuándo necesitas algo más, y luego añade GSAP para gestionar secuencias y scroll. Combínalo con Three.js para crear escenas 3D y no pierdas de vista las métricas en la guía de Web Performance. Después, anima una sección hero y siente la diferencia que marca una secuencia bien sincronizada.