Pour cet exercice, nous allons créer une animation synchronisant le défilement de la page avec une animation de déplacement du droïde BB-8 de Star Wars 🤖.
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
Effectuez une rotation de 1080 degrés sur le corps de BB-8 afin de simuler son déplacement.
Ajoutez ScrollTrigger à votre animation afin de synchroniser le défilement de la page avec celle-ci, mais avec une légère interpolation d'une demi-seconde.
Positionnez les marqueurs de debut et de fin d'animation de sorte que l'animation débute lorsque le milieu du corps de BB-8 atteint le milieu de la page et quelle se termine lorsque le milieu du corps atteint le haut de la page.
La barre sur le côté ne sert qu’à vous aider à visualiser le défilement de la page puisque BB-8 est fixe en tout temps.
Notes de cours 📚