IntermediateAnimación30 min22 may 2026

Animaciones de scroll con GSAP, con buen gusto

Scroll reveals que se sienten caros sin marear a los visitantes: scoping, staggers, easings y el contrato de prefers-reduced-motion.

El marco del buen gusto

La animación es el condimento, no el plato. Tres reglas que sigo en cada sitio:

  • Solo transform y opacity. Nunca animes top, left, width, height — disparan layout en cada frame.
  • Un patrón de entrada por sección. Un fade-up y: 20 → 0 con stagger: 0.1 se lee como artesanía; cinco entradas distintas se leen como caos.
  • Respeta prefers-reduced-motion. No negociable.

GSAP en React con scope y limpieza automática

useGSAP(() => {
  gsap.fromTo(".card",
    { y: 20, opacity: 0 },
    {
      scrollTrigger: { trigger: containerRef.current, start: "top 85%" },
      y: 0, opacity: 1, duration: 0.6, stagger: 0.1, ease: "back.out(1.5)",
    }
  );
}, { scope: containerRef });

scope te da scoping de selectores y limpieza automática — sin ScrollTriggers filtrados al cambiar de ruta.

Easings que se sienten humanos

Ease Se siente como
power3.out llegada segura
back.out(1.5) pop juguetón
elastic.out(1, 0.5) máximo una vez por sitio

El rebote elástico es un frasco de especias, no una botella de salsa.

Tutoriales