GSAP
De animatiebibliotheek achter alle beweging op onze sites. Precies, licht en op elk apparaat soepel.
Onderdeel van onze stack. We kiezen per project welke tools passen, niet andersom.
GSAP is de animatiebibliotheek achter alle beweging op onze sites. Scroll-effecten, paginaovergangen, tekst die binnenkomt, knoppen die reageren, menu's die openglijden. Alles met controle over timing en beweging tot op de milliseconde, licht in gewicht en soepel op elk apparaat.
Wat GSAP is
Een JavaScript-bibliotheek voor animatie, al meer dan tien jaar de standaard in de sector. Tijdlijnen, easing, ScrollTrigger voor scroll-gebonden effecten, SplitText voor tekst, en plugins voor alles wat verder beweegt. Sinds 2024 volledig gratis, ook commercieel.
Waarvoor wij het inzetten
Elke animatie op onze sites. Paginaovergangen samen met Barba.js, onderdelen die verschijnen bij scrollen, parallax, marquees, magnetische knoppen, tekst die regel voor regel opbouwt, een navigatie die reageert op scrollen. Deze site draait er volledig op, inclusief de pixelovergang en het megamenu.
Hoe wij het gebruiken
Alle animatie zit in één script dat we los van Webflow beheren en op Vercel hosten. In Webflow zet je een data-attribuut op een element, het script doet de rest. Daardoor is het snel, testbaar en herbruikbaar over projecten. Elke animatie ruimt zichzelf op bij een paginawissel.
Waarom niet de Webflow-interacties
Die werken voor eenvoudige dingen, maar wegen zwaar, zijn lastig te beheren bij veel animaties en breken bij paginaovergangen. GSAP is lichter, sneller en beter te onderhouden.
Hoe kunnen we helpen?
Cases waar we deze tools gebruiken
Projecten in deze sector
Vragen die we vaak krijgen
Maakt GSAP de site langzamer?
Nee, GSAP maakt een site niet langzamer. De bibliotheek is klein en animaties draaien op de GPU. We meten de snelheid bij elke oplevering.
Werkt GSAP met Webflow?
Ja, GSAP werkt volledig met Webflow. Webflow laadt GSAP zelf ook. Wij beheren de animaties in één eigen script, los van Webflow.
Werkt GSAP op mobiel?
Ja, GSAP werkt op mobiel. Zware effecten schakelen we op kleine schermen uit en hover-effecten vallen automatisch weg op touch.
Kunnen we GSAP-animaties zelf toevoegen?
Ja, met de data-attributen. Je zet in Webflow een attribuut op een element en ons GSAP-script doet de rest. Nieuwe soorten animatie bouwen wij.
Wat doet GSAP als een bezoeker minder beweging wil?
Dan schakelen de animaties terug. Onze sites luisteren naar de systeeminstelling voor beperkte beweging van de bezoeker en passen de GSAP-animaties daarop aan.