CSS Transities
Animeer de elementen op basis van wat je hebt geleerd uit de slides. Doe dit met behulp van CSS transities. Je kunt bijvoorbeeld :hover of :focus gebruiken hiervoor.
CSS Animaties
Animeer deze loaders, met behulp van CSS @keyframes.
Laden...
Laden...
Animeer de klok
Zorg ervoor dat de klok ongeveer werkt, zoals een echte klok.
Tip: Verander het anchor point van de wijzers met behulp van
transform-origin
JavaScript en GSAP
Nu gaan we aan de slag met JavaScript. Om browser bugs en quirks te voorkomen gebruiken we een library GSAP. Kopieer de script tag voor gsap.min.js vanuit deze pagina en implementeer deze in index.html. Ga daarna door met de opdrachten hieronder.
GSAP Animatie
Zorg ervoor dat het rode vierkant naar links en rechts beweegt afhankelijk van welke pijl knop er geklikt wordt.
Volg het spoor
Animeer de rode stip zodanig dat hij van 1 naar 2 naar 3 naar 4 en
daarna weer terug naar het begin gaat met een enkele klik. Op elk
nummer moet de rode stip een tussenstop maken. Als je wil kun je
de animatie meerdere malen of misschien zelfs oneindig vaak laten
afspelen.
Tip: Gebruik de timeline functie van GSAP om dit voor elkaar te
krijgen.
Toegankelijke animaties
Er staan een aantal vierkantjes , maar deze hebben een opacity van 0, vandaar dat je ze niet kunt zien. Zorg ervoor dat wanneer de knop “Maak vierkantjes zichtbaar” geklikt wordt, de vierkantjes omstebeurt in faden terwijl deze zich ook verplaatsen. Gebruik hiervoor de stagger functionaliteit van GSAP. Pas vervolgens deze animatie aan voor mensen die liever geen beweging willen door ze alleen te laten in faden. De vierkantjes hebben als class name “a11y-square”.
ScrollTrigger
Nu gaan we aan de slag met de ScrollTrigger van GSAP. Hiermee kunnen we animaties laten plaatsvinden op basis van bepaald scroll gedrag. Om de ScrollTrigger te kunnen gebruiken, moet deze eerst geïmplementeerd worden. Kopieer de script tag voor GSAP’s ScrollTrigger vanuit deze pagina en implementeer deze in index.html. Kijk vervolgens of het lukt om alle opdrachten op deze pagina in te laten animeren op het moment dat deze zichtbaar worden in de viewport.
Parallax effect
Met de GSAP’s ScrollTrigger kunnen we ook een zogeheten parallax-effect toevoegen. Dat wil zeggen dat het ene element sneller of langzamer beweegt dan een ander element tijdens het scrollen. Hiervoor kun je de “scrub” property gebruiken. Kijk eens of het lukt om het parallax effect toe te passen op de elementen in de header van deze pagina. De elementen hebben de volgende class names:
- parallax__title
- parallax__laptop
- parallax__wave_1
- parallax__wave_2
- parallax__wave_3
SVG Animatie implementeren
Implementeer hier een svg animatie uit de map "/assets/svg-animations/" met behulp van de Lottie player. Lees de documentatie op deze pagina door en ervaar hoe makkelijk het kan zijn om een lottie animatie te implementeren!
SVG Animatie implementeren 2
Hier gaan we weer een svg animatie implementeren, maar deze keer met wat meer flexibiliteit. Om de Lottie code te kunnen gebruiken dien je een ander lottie script te implementeren in je index.html. Het script kun je hier vinden. (lottie.min.js) De documentatie van dit script staat hier. Zorg ervoor dat de animatie zich anders gedraagd bij het klikken op de knoppen. Wat deze knoppen doen mag je zelf bepalen.
Playground
Indien je tijd over hebt, dan kun je in deze ruimte wat functionaliteiten van GSAP en misschien ook lottie uitproberen. Bekijk de documentatie en kijk of je een leuke uitdaging voor jezelf kunt verzinnen. De documentatie van GSAP kun je hier vinden. De documentatie van Lottie staat hier.