Beyond Tweening met GSAP

Cassie Evans – 7 maart 2025

Wat is GSAP?

GSAP (GreenSock Animation Platform) is een krachtige JavaScript-animatiebibliotheek. Je kunt het zien als een uitgebreide toolbox voor animaties: snel, soepel en met veel controle. Waar je met CSS beperkt bent tot eenvoudige overgangen en animaties, biedt GSAP je veel meer grip en flexibiliteit.

Een basisanimatie in GSAP ziet er zo uit:

gsap.to(".box", { x: 100, duration: 1 });

In deze tween geef je een methode aan (to), een target (bijv. .box) en de eigenschappen die je wil animeren (zoals x, duration, enz.).

Waarom GSAP gebruiken?

Met CSS werk je vooral declaratief. Je zegt wat er moet gebeuren, maar hebt weinig controle over de precieze timing en volgorde. Wil je een reeks animaties netjes achter elkaar laten verlopen, dan wordt het al snel complex. GSAP lost dit op met tijdlijnen:

let tl = gsap.timeline();
tl.to(".box", { x: 100 })
  .to(".box", { y: 50 }, "+=0.5");

Hiermee kun je animaties achter elkaar afspelen en exact bepalen wanneer wat gebeurt.

Tweens & Quick Setters

Tweens zijn korte animaties van één toestand naar een andere. GSAP kan ook gebruikt worden als quick setter, bijvoorbeeld bij een cursor-volger, waarbij je direct een waarde instelt zonder animatie.

Gratis plugins: ScrollTrigger

Een populaire plugin is ScrollTrigger. Hiermee koppel je animaties aan het scrollgedrag van de gebruiker, bijvoorbeeld voor parallaxeffecten of animaties die starten wanneer iets in beeld komt.

GSAP Utilities

  • gsap.utils.random(min, max) – voor natuurlijk ogende willekeur
  • gsap.utils.mapRange() – vertaal input naar een ander bereik
  • gsap.utils.wrap() – laat een waarde teruglopen naar het begin van een array
  • gsap.utils.pipe() – combineer functies in een keten

Meer controle dan CSS: Easings

GSAP biedt uitgebreide controle over easing, oftewel de manier waarop een animatie versnelt of vertraagt. Je kunt experimenteren met easings voor een natuurlijkere animatie dan mogelijk is met standaard CSS.

Responsieve animaties met matchMedia()

GSAP ondersteunt matchMedia(), vergelijkbaar met CSS media queries, maar dan in JavaScript. Je kunt animaties aanpassen op basis van:

  • Schermgrootte en oriëntatie
  • Pointertypes (touch, mouse)
  • Hover-capaciteit
  • Scroll-gedrag
  • Voorkeuren zoals 'reduce motion' voor toegankelijkheid

Controle over animaties

Met GSAP kun je animaties volledig beheren met methoden als:

  • play()
  • pause()
  • resume()
  • reverse()
  • restart()

Helperfuncties & Voorbeelden

GSAP biedt kant-en-klare scripts voor bijvoorbeeld:

  • Horizontaal scrollende secties
  • Geanimeerde container-elementen

Bekijk meer voorbeelden op de GSAP demo-pagina.

Quote van Cassie Evans:
“If all you have is a hammer, everything looks like a nail.”

Met andere woorden: als je alleen CSS kent, probeer je alles daarmee op te lossen. Maar sommige animaties hebben meer finesse nodig, en daar is GSAP perfect voor.