πŸ’œ

Cassie Evans

Sprint 19

We πŸ’œ Web met Cassie Evans

Over Cassie Evans

  • Expertise:
    • Gespecialiseerd in web animaties
    • Expert in GSAP (GreenSock Animation Platform)

Wat is GSAP?

GSAP is een uitgebreid framework waarmee je UI, 2D en 3D elementen kunt animeren. Het biedt een complete toolbox voor animaties met:

  • Methoden en doelen:
    • Positie en richting bepaling
    • Scroll-gebaseerde animaties
    • Container animaties

GSAP Utils

GSAP biedt verschillende utility functies om code efficiΓ«nter te maken:

  • Beschikbare Utils:
    • utils.random() - Voor willekeurige waarden
    • utils.mapRange() - Voor het mappen van bereiken
    • utils.wrap() - Voor het omwikkelen van waarden
    • utils.pipe() - Voor het combineren van functies

Animatie Tips

  • Easing:
    • Gebruik de Ease Visualizer voor het perfect afstemmen van animaties
    • Experimenteer met glitch-effecten via easing
  • Responsive Animaties:
    • Gebruik matchMedia voor schermgrootte-specifieke animaties
    • Implementeer verschillende animaties voor verschillende gebruikersvoorkeuren

Control Methods

  • Beschikbare methoden:
    • play() - Start de animatie
    • pause() - Pauzeert de animatie
    • resume() - Hervat de animatie
    • reverse() - Keert de animatie om
    • restart() - Herstart de animatie

Timeline Features

  • Mogelijkheden:
    • Container animaties voor geneste effecten
    • Motion paths voor complexe bewegingen
    • Enter en exit animaties