Weekly Nerds

Introductie

Cassie Adams is een animatie-expert en creative developer. In haar talk “Beyond Tweening” laat ze zien hoe je met GSAP echt álles kunt animeren, van simpele interacties tot complexe scroll gebaseerde animaties.

Spreker: Cassie Adams | 8 mei 2025

Waar ging de talk over?

GSAP is niet alleen handig voor simpele tweens, maar vooral krachtig wanneer je meerdere animaties achter elkaar wilt zetten met behulp van een timeline. Ze benadrukte dat GSAP geschikt is voor HTML-, CSS- en JS-elementen. Daarnaast werd het belang van "het juiste gereedschap voor de juiste klus" besproken.

Belangrijke inzichten

• GSAP maakt animaties mogelijk op HTML, CSS en JS elementen
• Timelines zorgen voor overzicht en controle over animatiereeksen
• Scroll-gebaseerde animaties en hover-effecten zijn makkelijk te implementeren
• “If all you have is a hammer, everything looks like a nail” – gebruik tools bewust

Demo en tools

• utils.random(): genereert willekeurige getallen of kleuren
• mapRange: maakt animeren makkelijker over verschillende schermgroottes
• wrap: handig voor marquees
• pipe: combineert functies
• Easing: je kunt easing op easing stapelen, gebruik de easing visualizer
• matchMedia: vergelijkbaar met @media, maar dan in JS – inclusief respect voor reduceMotion
• Helper functions: bruikbaar voor complexe situaties zoals carousels en horizontale scrolling
• MotionPathHelper: bewerk motion paths live in de browser

Conclusie

Ik werd best enthousiast van deze talk, omdat ik veel hou van motion en animatie. Ik heb inmiddels een goede basiskennis van HTML en CSS, maar mijn JavaScript skills wil ik nog verder aanscherpen. GSAP lijkt me een krachtige tool om creatiever en expressiever te kunnen werken op het web. Jammer dat deze talk net in een fase viel waarin we vooral met HTML en CSS bezig waren, maar tijdens de Meesterproef wil ik hier misschien in duiken om echt vette, betekenisvolle animaties te maken.