Ga naar hoofdinhoud
Stacklane

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 productschermen blijven systeem-native scrollen; 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

  1. Je levert op een marketing-site die scroll-aangedreven sequenties nodig heeft en je hebt er te veel gezien die Core Web Vitals tanken.

  2. Je design heeft 'on-scroll reveal' op elke sectie en de pagina voelt langzaam zelfs op een high-end laptop.

  3. 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 om vast te stellen wat je nodig hebt. Geen pitchdeck, geen verplichtingen. We zeggen je eerlijk of Stacklane past.

Kennismaken