Pour cet exercice, nous allons synchroniser des animations CSS de type sprite sheet de Link, le protagoniste de la franchise Zelda, avec GSAP ScrollTrigger ⚔️.
Aperçu du résultat 👇
Matériel
Pen de départ
Vous n’avez qu’à ajouter JavaScript (nul besoin de modifier le HTML ou le CSS).
Les librairies GSAP et ScrollTrigger sont déjà inclues dans le Pen, vous laissant ainsi vous concentrer sur l'animation GSAP à réaliser.
Requis
Créez-vous une animation GSAP sur l'élément correspondant au niveau (.level). Cette animation devra être synchronisée avec le défilement de la page. Aussi étrange que cela puisse paraitre, aucune propriété de l'animation ne devra être animée. Cette animation ne servira que de référence afin de synchroniser certains événements.
Lorsque le niveau (.level) défile, ajoutez la classe .is-scrolling au body de la page.
Après 250ms sans défilement, retirez la classe .is-scrolling du body de la page.
Si le défilement monte ⬆️, ajoutez la classe .direction-up et retirez la classe .direction-down du body.
Si le défilement descend ⬇️, ajoutez la classe .direction-down et retirez la classe .direction-up du body.
Notes de cours 📚