GSAP (GreenSock Animation Platform) is een JavaScript-bibliotheek om dingen op een webpagina te animeren. Het verplaatst, laat vervagen, schaalt en draait elementen met een mate van timingcontrole die kale CSS niet haalt, en het blijft soepel, zelfs bij lange reeksen met veel stappen.
Zie het als de tijdlijn van een videomonteur. In plaats van effecten één voor één af te vuren en te hopen dat ze op elkaar aansluiten, zet je elke beweging op één spoor, bepaal je wanneer elke start, en speelt GSAP het geheel frame voor frame af. Daarom grijpen studio’s ernaar bij sites waar een teller in de hero oploopt, een grafiek zichzelf intekent en een kop binnenschuift, allemaal tot op de milliseconde gechoreografeerd. Het is een van de meest vertrouwde JavaScript libraries voor beweging en gedraagt zich consistent in browsers waar pure CSS-animatie onvoorspelbaar wordt.
GSAP heeft ook een ScrollTrigger-plugin, die animaties koppelt aan hoe ver een bezoeker gescrold heeft. Zo kan een sectie op zijn plek blijven plakken en stap voor stap binnenkomen terwijl je naar beneden beweegt.
Het addertje zit in gewicht en discipline. GSAP is extra JavaScript die de browser moet downloaden en draaien, dus het verdient zijn plek op een marketing- of productpagina, niet op een simpele blog waar een CSS-fade volstaat. En zoals elke animatietool kun je het overdrijven: beweging die de lezer tegenwerkt in plaats van leidt, is erger dan helemaal niets. De kunst is weten wanneer een hover-effect CSS nodig heeft en wanneer een synchrone reeks echt een timeline vraagt.
Bij TopDevs zetten we GSAP in wanneer een site animatie nodig heeft die doelgericht aanvoelt in plaats van opzichtig, en we houden het achter reduced-motion-instellingen zodat het nooit botst met toegankelijkheid.
