Reveal bij scrollen, een leesvoortgangsbalk, parallax en een sticky verhaal, elk op drie manieren gebouwd: CSS scroll-driven animations, IntersectionObserver en GSAP ScrollTrigger.
Scrollanimaties spelen effecten af wanneer content in beeld komt of wanneer de pagina scrolt. Moderne CSS koppelt keyframes aan het scrollen met animation-timeline: view() of scroll(), zonder script waar dat wordt ondersteund. IntersectionObserver in JavaScript zet overal reveal-classes aan, en GSAP ScrollTrigger regelt pinnen en gescrubde timelines. Respecteer altijd prefers-reduced-motion.
Kies een aanpak
De vier effecten waar het vaakst om wordt gevraagd, reveal bij scrollen, een leesvoortgangsbalk, parallax en een sticky verhaal, worden elk getoond in pure CSS, in gewone JavaScript met IntersectionObserver en in GSAP ScrollTrigger. De CSS-versies draaien live in scrollbare frames, en de observer-versie draait als werkende demo op deze pagina.
Het koppelt de voortgang van een animatie aan het scrollen in plaats van aan de tijd. scroll() volgt hoe ver een scrollcontainer is gescrold, van boven naar beneden. view() volgt de reis van één element door het zichtbare gebied, zodat de keyframes lopen terwijl het binnenkomt en verdwijnt.
Chrome en Edge sinds versie 115, en Safari sinds versie 26. Firefox heeft de functie achter een voorkeursinstelling gehad in plaats van standaard aan, dus controleer caniuse voordat u erop vertrouwt, en bied altijd een fallback.
Om te weten wanneer een element in of uit beeld gaat: ja. De browser berekent overlappingen asynchroon en roept u alleen aan bij veranderingen, terwijl een scroll-listener vele keren per seconde draait en u verleidt tot het uitlezen van de lay-out, wat haperingen veroorzaakt.
Niet voor eenvoudige reveals of een voortgangsbalk. GSAP ScrollTrigger verdient zijn plek bij gepinde secties, gescrubde timelines met meerdere stappen, snapping en effecten die zich vandaag in elke browser hetzelfde moeten gedragen.
Toon binnen een media query prefers-reduced-motion: reduce de content in de eindtoestand en laat parallax en grote bewegingen weg. Controleer in JavaScript met window.matchMedia dezelfde query voordat u animaties aanmaakt. Zachte fades in opacity zijn meestal aanvaardbaar.
Elk frame scrolt op zichzelf. In een browser zonder animation-timeline laat de @supports-guard alles zichtbaar en stil staan.
Elke kaart vervaagt in en schuift omhoog wanneer hij de viewport binnenkomt. animation-range beperkt het effect tot de binnenkomstfase.
scroll(root) volgt de scroller van het document. De balk schaalt van 0 naar volledige breedte zonder enige listener.
De binnenste laag beweegt langzamer dan de pagina terwijl zijn vak door de viewport gaat. Uitgeschakeld bij reduced motion.
De afbeelding blijft vastgepind met position: sticky, terwijl elke stap oplicht wanneer hij het midden van het frame passeert.
De live demo bovenaan deze pagina draait hetzelfde patroon in React. Deze versies werken in elk framework, of zonder framework.
Kaarten starten pas verborgen als het script is uitgevoerd, door eerst een class aan html toe te voegen, zodat een mislukt script ze zichtbaar laat.
Voortgang vereist de exacte scrollpositie, dus deze versie gebruikt een passieve scroll-listener met een throttling van één frame.
Een smalle observatieband in het midden van het scherm markeert de stap die hem op dat moment passeert als actief.
Alleen code. ScrollTrigger is een GSAP-plugin; beide zijn gratis te gebruiken onder de eigen licentie van GSAP, die u moet lezen voordat u live gaat.
gsap.matchMedia voert de setup alleen uit als de lezer niet om reduced motion heeft gevraagd, en draait hem terug als de instelling verandert.
Scrol in het vak. Kaarten verschijnen één keer, de balk volgt de voortgang, de gestreepte laag beweegt langzamer dan de content en het vastgepinde paneel volgt de stap die het midden passeert.
Reduced motion staat aan, dus kaarten verschijnen zonder beweging en parallax staat uit.
Scrollvoortgang in de demo
Scrollbaar demogebied
Begin met scrollen.
Parallaxlaag
Gratis beginnen · Geen creditcard nodig