Exercice : la magie au défilement¶

Utilisation de l'IA interdite pour cette activité. Faites chauffer vos méninges!

Gardez la page GSAP : ScrollTrigger ouverte à côté.

Obtenir votre dépôt (5 min)¶

Accepter l'exercice dans Classroom 50

1. Ouvrez le lien ci-dessus, connectez-vous avec Sign in with GitHub, puis acceptez l'exercice.
2. Clonez votre dépôt et ouvrez-le dans VS Code.
3. Ouvrez index.html avec Live Server.

Pas de npm install : GSAP est chargé par CDN, avec une balise <script> dans index.html, avant js/script.js. Comme dans votre récit.

Dans index.html, GSAP et le plugin ScrollTrigger sont déjà chargés. Dans js/script.js : l'état de départ et la timeline de l'exercice Magie. Défilez : le numéro se joue tout de suite, au chargement, même si la scène n'est pas encore à l'écran.

Aperçu du résultat¶

Partie 1 : déclencher au défilement (10 min)¶

• En haut de js/script.js, enregistrez le plugin : gsap.registerPlugin(ScrollTrigger);
• Ajoutez un objet de paramètres à gsap.timeline(), avec un scrollTrigger :
  • l'élément observé (trigger) : la scène, .scene;
  • les repères : markers: true.

gsap.timeline({
  scrollTrigger: {
    // ...
  },
})
  .to(/* ... */)

• Défilez lentement. Observez les 4 repères : le numéro démarre quand start croise scroller-start.
• Changez start pour que le numéro démarre quand le haut de la scène atteint le milieu de l'écran.
• Remontez : le numéro ne se rejoue pas. Ajoutez des toggleActions pour qu'il se rejoue à l'envers quand on remonte au-dessus de la scène.

• Commit (Partie 1 : déclenche le numéro au défilement), puis push.

Partie 2 : suivre le défilement (5 min)¶

Avec toggleActions, le numéro joue tout seul, à sa vitesse. Dans un récit, c'est le visiteur qui doit le faire avancer.

• Remplacez les toggleActions par scrub: true. Défilez, arrêtez, remontez.
• Essayez ensuite scrub: 1. Quelle différence?

• Commit (Partie 2 : le numéro suit le défilement), puis push.

Partie 3 : épingler la scène (10 min)¶

• Le numéro commence quand le haut de la scène touche le haut de l'écran : réglez start.
• Ajoutez pin: true : la scène reste en place pendant tout le numéro.
• Le numéro dure 3 écrans de défilement : réglez end avec une valeur relative.

• Défilez : la scène s'arrête, le numéro se joue au rythme de votre défilement, puis la page repart quand la main est sortie.
• Retirez les markers.
• Commit (Partie 3 : épingle la scène), puis push.

Partie 4 : le mouvement réduit (5 min)¶

Avec le mouvement réduit, le numéro ne doit pas jouer, et rien ne doit rester caché : le chapeau, la baguette et la main restent visibles, à leur place.

• Enveloppez l'état de départ et la timeline dans gsap.matchMedia(), avec la condition (prefers-reduced-motion: no-preference).
• Testez : dans Chrome, inspecteur → menu ⋮ → More tools → Rendering → Emulate CSS media feature prefers-reduced-motion → reduce. Rechargez : tout est visible, rien ne bouge, et la scène n'est plus épinglée.

• Commit (Partie 4 : respecte le mouvement réduit), puis push.

Bonus (facultatif)¶

• À la fin du numéro, la main reste quelques instants en l'air avant que la page reparte. Indice : un tween « vide » à la fin de la timeline, .to({}, { duration: 1 }), ajoute du défilement sans rien animer.
• Ajoutez un titre dans la scène (« Ta-da! ») qui apparaît à la toute fin du numéro.
• Commit (Bonus : une pause à la fin), puis push.

Je vois votre dépôt et vos commits dans Classroom 50.

Scène et images : exercice Magie du cours Web 3 (582-311), TIM Montmorency, avec sa permission.