Stap-voor-stap verhaal

Vertel een verhaal in stappen: de sectie blijft in beeld staan terwijl de bezoeker scrolt en de onderdelen verschijnen één voor één. Elke scroll-beweging onthult de volgende stap — ideaal voor een werkwijze of proces. De technische naam is GsapScrollSteps.

Gebruik dit block op pagina's waar je een proces of werkwijze wilt uitleggen: een aanvraagprocedure, een productieproces of de stappen die een klant doorloopt. Omdat de sectie vastgezet blijft terwijl de tekst verandert, houd je de aandacht bij één visueel anker in plaats van dat de bezoeker steeds naar een nieuw blok scrolt.

Het lost het probleem op van een lange, platte opsomming die bezoekers overslaan: door elke stap apart te onthullen, leest iedereen het hele verhaal in plaats van er half doorheen te scrollen. Denk aan een uitlegpagina over hoe een bestelproces werkt, of een pagina die het onboardingtraject van een nieuwe klant toont.

Wil je losse elementen laten verschijnen zonder de vastgezette sectie, dan is GsapReveal een lichter alternatief.

Toepassingen per site-type

Op een webshop werkt dit block goed voor het uitleggen van het bestelproces: stap 1 - product kiezen, stap 2 - bestelling plaatsen, stap 3 - levering volgen. Bezoekers begrijpen zo in één scrollbeweging wat ze kunnen verwachten, zonder dat ze een aparte FAQ-pagina hoeven te raadplegen. Een portfolio-site zet dit block juist in om het ontwerpproces te tonen: van eerste schets tot opgeleverd project, met bij elke stap een korte toelichting. Bij een zakelijke dienstverlener, bijvoorbeeld een advieskantoor, verduidelijkt de sectie het traject dat een nieuwe klant doorloopt: kennismaking, analyse, voorstel en uitvoering.

Een veelgemaakte fout is te veel stappen in één sectie proppen: bij meer dan vijf of zes stappen verliest de bezoeker het overzicht en voelt scrollen als eindeloos vasthouden. Splits een lang proces liever op in twee kortere GsapScrollSteps-secties met een korte tussenkop, of vat de laatste stappen samen. Een tweede valkuil is te veel tekst per stap: omdat de sectie vastgezet blijft, moet elke stap in een oogopslag leesbaar zijn — een korte kop met één zin volstaat, uitgebreide uitleg hoort in een los artikel.

Dit block combineert goed met een CTA direct erna: nadat de bezoeker het hele proces heeft gezien, is dat het moment om de actie te vragen, bijvoorbeeld een aanvraag starten of een offerte opvragen. Vermijd het combineren van meerdere Gsap-blocks vlak na elkaar op dezelfde pagina — bijvoorbeeld een GsapHorizontalScroll direct gevolgd door een GsapScrollSteps — dat vraagt te veel scroll-aandacht van de bezoeker in één keer.

Omdat de sectie tijdens het scrollen vastgezet blijft, telt de lengte mee voor de laadtijd-perceptie: hou het aantal stappen en de hoeveelheid inhoud per stap beperkt, zeker op mobiel waar het scherm kleiner is en vastzetten sneller als opdringerig aanvoelt. Test de sectie ook met 'verminderde beweging' ingeschakeld in het besturingssysteem — GSAP-animaties in Obelisk respecteren deze voorkeur automatisch, maar controleer dat de inhoud ook zonder animatie leesbaar blijft.

Voorbeeld

De prompt voor dit voorbeeld

Maak een sectie die deze drie stappen één voor één toont tijdens het scrollen: 'Vertel wat je wilt', 'De assistent bouwt het', 'Je site staat live'.