GSAP Scroll Animation Demo
Una demo de scroll inspirada en las animaciones de producto de Apple.
GSAP Scroll Animation Demo fue un ejercicio para entender cómo se construyen esas animaciones de producto que parecen video, pero responden al scroll. El reto principal fue sincronizar texto, escala, opacidad y una secuencia de imágenes renderizada en canvas.
Este fue de los proyectos que más disfruté porque me abrió la puerta a GSAP. Aprendí que una animación buena no es solo mover elementos: también es controlar tiempos, rendimiento, dirección del scroll y la sensación de continuidad.
Tecnologías y decisiones
-
GSAP y ScrollTrigger: Lo usé para conectar la animación con la posición del scroll y controlar transiciones que se sienten fluidas al avanzar o retroceder.
-
Canvas: Sirvió para renderizar una secuencia de imágenes cuadro por cuadro, dando la sensación de video controlado por el usuario.
-
Timeline: Me ayudó a ordenar varias animaciones en una sola secuencia y ajustar mejor cuándo entra cada transición.
-
Parámetro Scrub: Fue clave para que la animación siguiera el scroll de forma reversible, sin sentirse como un disparo aislado.
Qué construí
- Sincronicé una secuencia de imágenes en canvas con el desplazamiento de la página.
- Ajusté animaciones de título, opacidad y escala con ScrollTrigger para que todo avanzara al mismo ritmo.
- Aprendí a usar scrub y timelines para construir una animación reversible y más precisa.
- El proyecto me ayudó a entender mejor la relación entre animación, scroll y rendimiento.