Narrativa d'scroll amb GSAP
Una marca de cafè d'origen únic explicada íntegrament amb l'scroll. A mesura que baixes, el nom es fixa i es dissol, les carenes de muntanya es mouen en parallax, una galeria avança en horitzontal i les xifres pugen — l'ofici de motion que hi ha darrere de les webs d'agència.
La tècnica
Dues llibreries fan la feina. GSAP amb ScrollTrigger vincula cada animació a la posició de l'scroll: fixa seccions, les anima endavant i endarrere segons et mous, i mou la galeria horitzontal. Lenis suavitza el mateix scroll perquè res no faci salts. Tot va a 60 fotogrames per segon, pesa uns 50 KB i mostra una pàgina estàtica neta si es demana reduced-motion.
Com està fet
GSAP
GSAP és el motor d'animació. Seqüencia l'entrada, expandeix i dissol el nom, escalona els reveals de text i fa pujar les xifres — tot amb un timing precís, fotograma a fotograma, que les transicions de CSS no arriben a fer.
ScrollTrigger
ScrollTrigger és el plugin de GSAP que lliga les animacions a la posició de l'scroll. Fixa una secció, reprodueix una animació endavant i endarrere segons fas scroll, i converteix un scroll vertical en la galeria horitzontal — la columna vertebral de tots els efectes lligats a l'scroll de la pàgina.
Lenis
Lenis suavitza el mateix desplaçament. En lloc dels salts bruscos del navegador, la pàgina llisca amb una inèrcia subtil, sincronitzada fotograma a fotograma amb les animacions. És el petit detall que fa que tot es senti premium i no a batzegades.
Per a què serveix
Aquest és el tipus de moviment que fa que una marca, un llançament de producte o un portfolio es sentin cuidats i no de plantilla — i el detall que els visitants recorden. A Nexe Labs el construïm a mida, ajustat perquè carregui ràpid i funcioni a qualsevol dispositiu. Si vols una web que es mogui així, en parlem.