Scroll-animaties, motion die de scroll verdient, geen motion die hem belast.
Scroll-driven animatie is geweldig als hij betaalt en verschrikkelijk als hij dat niet doet. We bouwen de scroll-laag met motion/react of GSAP ScrollTrigger, meten de kosten, en opleveren alleen de momenten waar de motion daadwerkelijk informatie draagt.
Wat we bouwen
Aangedreven door IntersectionObserver, geen scroll-positie
Per-component intersection-thresholds triggeren de animatie; de scroll-positie zelf drijft alleen het zeldzame effect dat het verdient. Goedkoop op de main-thread, makkelijk om over te redeneren, toegankelijk voor reduced-motion.
GSAP ScrollTrigger voor de pieces die dat rechtvaardigen
Pinned secties, gescrubde tijdlijnen, complexe sequenties, GSAP ScrollTrigger draagt het zware werk. We grijpen er niet naar op elke pagina; we gebruiken het waar het alternatief honderden regels useEffect is.
Lenis voor smooth scroll, alleen waar het betaalt
Smooth-scroll libraries veranderen de scroll-ervaring; we gebruiken ze alleen op pagina's waar de animatie ervan afhangt. De product-oppervlakken blijven op native scroll; de marketing-pagina's opt-in bewust.
Performance-budget afgedwongen in CI
Lighthouse CI trackt INP en TBT. Scroll-animaties die de pagina over budget duwen falen de build. We meten voor wij leveren op; we meten weer na.
Reduced-motion downgrades, geen opt-out
Gebruikers met `prefers-reduced-motion` zien nog steeds de structurele reveals op volle opacity, zonder de motion. De pagina werkt nog; de choreografie wordt gewoon gerespecteerd.
Mobile-aware motion
Mobiele devices hebben minder GPU-headroom en kortere viewports. Scroll-animaties schalen omlaag of vallen helemaal weg op mobile als de kosten-vs-payoff rekensom dat zegt.
Waar dit past
Je levert op een marketing-site die scroll-aangedreven sequenties nodig heeft en je hebt er te veel gezien die Core Web Vitals tanken.
Je design heeft 'on-scroll reveal' op elke sectie en de pagina voelt langzaam zelfs op een high-end laptop.
Je team debateert of smooth-scroll over de hele site toe te voegen en je wilt het gescoped op waar het echt helpt.
Tech stack
- motion/react
- GSAP ScrollTrigger
- Lenis
- IntersectionObserver
Wil je dit voor je team?
30 minuten met een oprichter of ervaren ontwikkelaar. We bepalen wat je nodig hebt en zeggen je eerlijk of Stacklane past.
Plan een gesprekVerwante capabilities