GSAP ScrollTrigger - Historique Zelda

Pour cet exercice nous allons recréer une page démontrant l’évolution de la franchise Zelda au Nintendo et la bonifier d’animations synchronisées avec le défilement de la page.

Aperçu du résultat 👇

Matériel Pen de départ Vous n’avez qu’à ajouter du JavaScript (nul besoin de modifier le HTML et le CSS).

Les librairies GSAP et ScrollTrigger sont déjà incluses dans le Pen de départ.

Requis Vous devez utiliser une boucle forEach sur chacune des bannières afin de déclencher une animation lorsqu'une d'elles devient entièrement visibles dans la fenêtre. Lorsqu'une bannière devient visible, doublez la taille de son image et animer la de sorte qu'elle retrouve sa taille d'origine. En même temps que l'animation précédente, faites apparaitre en fondu le titre du jeu et le faites le monter de 100px vers le haut, jusqu'à son point d'origine. Faites ensuite apparaître en fondu l'année de sortie. Notes de cours 📚 QuerySelectorAll()
Boucle forEach()