Verschijn-effect bij scrollen
Laat koppen, afbeeldingen of hele secties soepel in beeld verschijnen op het moment dat de bezoeker ernaartoe scrolt — zonder iets in te stellen.
Laat inhoud soepel verschijnen op het moment dat de bezoeker ernaartoe scrolt: het element fade't in en schuift op z'n plek. Je zet er simpelweg iets in — een kop, een afbeelding, een hele sectie — en het animeert vanzelf zodra het in beeld komt. De technische naam is GsapReveal.
Dit is het meest gebruikte scroll-effect van de GSAP-familie: gebruik het als standaard-animatie voor secties, kaarten of afbeeldingen verderop op de pagina, zodat de pagina niet alles in één keer toont bij het laden. Het werkt zonder configuratie — je wikkelt simpelweg bestaande content in GsapReveal.
Voor grotere pagina's met veel secties is het verstandig GsapReveal consequent toe te passen op elke sectie-opening, zodat het scrollritme voorspelbaar blijft. Zie ook GsapPin voor het tegenovergestelde effect: content die juist blijft staan in plaats van verschijnt.
Gebruiksscenario's per site-type
Op vrijwel elk type site is GsapReveal de standaardkeuze voor secties die niet direct bij het laden zichtbaar zijn: een webshop gebruikt het voor elke productrij verderop op de categoriepagina, een portfolio-site voor elk nieuw projectblok, en een zakelijke dienstverlener voor elke dienst- of teamsectie op de homepage. Omdat het zonder configuratie werkt, is dit ook het block waarmee je als eerste experimenteert wanneer een pagina net iets levendiger mag ogen dan volledig statische content.
Veelgemaakte fouten en performance
Een veelgemaakte fout is dit block ook om de eerste, direct zichtbare sectie boven de vouw wikkelen: die content is bij het laden al in beeld, dus de fade-animatie speelt dan te snel af of oogt als een knippering in plaats van een bewuste onthulling. Bewaar GsapReveal voor content die pas verschijnt na scrollen.
Gebruik dit effect consistent: wissel niet willekeurig tussen wel en niet gewrapte secties op dezelfde pagina, dat oogt onafgemaakt. Voor content die juist moet blijven hangen in plaats van verschijnen, gebruik je GsapPin; voor een dieptelaag die meebeweegt met het scrolltempo is GsapParallax een sterker alternatief dan reveal.
Vermijd te zware content binnen één GsapReveal-wrapper, zoals een sectie met tientallen afbeeldingen tegelijk: hoe meer er in één keer moet infaden, hoe minder soepel de animatie aanvoelt op een minder krachtig apparaat. Splits een grote sectie liever in kleinere, losse GsapReveal-blokken die elk apart in beeld verschijnen.
Voorbeeld
Welkom bij Obelisk
Dit blok verschijnt met een zachte fade zodra het in beeld scrolt.
De prompt voor dit voorbeeld
Zet een kader op de pagina met de kop 'Welkom bij Obelisk' en laat het soepel in beeld verschijnen tijdens het scrollen.