Maquetación Web Dinámica / GSAP y animación de nivel Awwwards

Proyecto: landing con scrollytelling completo

Proyecto160 min150 XP

La pieza definitiva del módulo y una de las más impresionantes del curso: una landing con scrollytelling completo. Barra de progreso, parallax en el hero, texto que se revela, y una galería horizontal que se recorre con el scroll vertical (pin + scrub). El tipo de página que se gana un Awwwards — y que ahora sabes construir de principio a fin.

Reto

Scrollytelling: pin, scrub y parallax

Difícil150 min150 XP(×2 sin mirar la solución)

Qué debes construir

Una landing de una página con estos efectos de scroll coordinados:

Barra de progreso de lectura arriba, atada al scroll de toda la página (scrub).
Hero con parallax: al menos dos capas moviéndose a distinta velocidad.
Texto revelándose (palabra por palabra o secciones con fade-up al entrar).
Galería horizontal pinneada: una sección que se FIJA y cuyos paneles se recorren en horizontal mientras haces scroll vertical (pin + scrub).
Todo respeta prefers-reduced-motion: sin animación, la página es legible, todo visible y navegable (la galería como stack vertical).

Reglas

GSAP + ScrollTrigger (dependencia del sandbox).
Degradación honesta: la versión reduced-motion NO puede dejar contenido oculto ni una galería rota.
Parallax sutil (yPercent 15-40, no 100) — lo premium es contenido.

150:00

Cuando estés listo, arranca el reloj.

El razonamiento — un scrollytelling es varios ScrollTriggers independientes sobre una base que funciona sin ninguno:

La base va primero y sobrevive sola. Todas las secciones son legibles y están en su sitio ANTES de GSAP. Los efectos se añaden encima; si GSAP no corriera (reduced-motion, error), la página sigue siendo una landing válida. Eso es lo que hace segura la degradación.
Cada efecto es su propio ScrollTrigger. Progreso, parallax, reveals y galería no se conocen entre sí: cuatro triggers independientes sobre la misma página. Añadir o quitar uno no toca a los demás — la misma modularidad de siempre.
pin + scrub es el corazón del scrollytelling. Pinnear una sección y mapear el scroll a xPercent es lo que convierte el scroll vertical en una experiencia dirigida. Es el efecto más "mágico" y son ~6 líneas.

La landing completa:

Desplázate por la landing: la barra se llena con tu scroll, el título se armó palabra por palabra, el fondo del hero hace parallax, y al llegar a la galería la sección se FIJA y los paneles desfilan en horizontal mientras sigues bajando — hasta soltarte en el cierre. Cambia prefers-reduced-motion en DevTools y verás la versión legible: galería apilada, todo visible, cero efectos.

Autoevaluación: ¿la barra de progreso sigue el scroll con precisión? ¿el parallax es SUTIL (no mareante)? ¿la galería se fija y scrollea horizontal sin saltos? ¿con reduced-motion la página queda completa y usable, la galería como stack? Cuatro síes: construiste un scrollytelling de nivel profesional.

Nota honesta de producción: en un sitio real, el pin conviene envolverlo en ScrollTrigger.refresh() tras cargar fuentes/imágenes (para que recalcule posiciones), y en móvil se suele simplificar el parallax (la barra de direcciones que aparece/desaparece complica los cálculos de altura). Detalles de pulido que aprenderás afinando proyectos reales; la arquitectura ya la tienes.

Qué sigue

Módulo 16 cerrado: dominas GSAP de punta a punta, con un scrollytelling de portafolio en tu haber. Con esto tienes el arsenal de ANIMACIÓN completo — de las transiciones CSS a las timelines de Awwwards. El módulo 17 cambia el foco de "cómo se mueve" a "cómo se ORGANIZA": arquitectura CSS y design tokens, el sistema que evita que tu CSS se vuelva un caos cuando el proyecto crece — y el puente directo a Tailwind.