Narrativa de scroll con GSAP
Una marca de café de origen único contada íntegramente con el scroll. A medida que bajas, el nombre se fija y se disuelve, las crestas de montaña se mueven en parallax, una galería avanza en horizontal y las cifras suben — el oficio de motion que hay detrás de las webs de agencia.
La técnica
Dos librerías hacen el trabajo. GSAP con ScrollTrigger vincula cada animación a la posición del scroll: fija secciones, las anima hacia delante y hacia atrás según te mueves, y mueve la galería horizontal. Lenis suaviza el propio scroll para que nada dé saltos. Todo va a 60 fotogramas por segundo, pesa unos 50 KB y muestra una página estática limpia si se pide reduced-motion.
Cómo está hecho
GSAP
GSAP es el motor de animación. Secuencia la entrada, expande y disuelve el nombre, escalona los reveals de texto y hace subir las cifras — todo con un timing preciso, fotograma a fotograma, que las transiciones de CSS no alcanzan.
ScrollTrigger
ScrollTrigger es el plugin de GSAP que ata las animaciones a la posición del scroll. Fija una sección, reproduce una animación hacia delante y hacia atrás según haces scroll, y convierte un scroll vertical en la galería horizontal — la columna vertebral de todos los efectos ligados al scroll de la página.
Lenis
Lenis suaviza el propio desplazamiento. En lugar de los saltos bruscos del navegador, la página se desliza con una inercia sutil, sincronizada fotograma a fotograma con las animaciones. Es el pequeño detalle que hace que todo se sienta premium y no a tirones.
Para qué sirve
Este es el tipo de movimiento que hace que una marca, un lanzamiento de producto o un portfolio se sientan cuidados y no de plantilla — y el detalle que los visitantes recuerdan. En Nexe Labs lo construimos a medida, ajustado para cargar rápido y funcionar en cualquier dispositivo. Si quieres una web que se mueva así, hablamos.