Cours 10.1¶

Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails

GSAP : tweens (interpolations) et timelines

Animer une chose, puis enchaîner : le pont depuis Anime.js.

La référence

GSAP : ScrollTrigger

Déclencher, suivre le défilement, épingler une scène.

La référence

Aujourd'hui¶

Retour sur la spritesheet et la parallaxe : vérifiez votre travail
Pourquoi GSAP, si le CSS sait déjà animer au défilement?
Les tweens (interpolations) : exercice Zombi
La timeline : exercice Magie
ScrollTrigger : exercice la magie au défilement
Dans votre projet : vos premières scènes GSAP
Rappel : le point de contrôle, vendredi

1. Retour : spritesheet et parallaxe (10 min)¶

Les deux exercices de la semaine 9 n'ont pas eu de retour : le monstre responsive et la parallaxe. Pas de solution à copier : chaque énoncé a maintenant une grille Vérifiez votre travail et des indices par paliers.

Le piège commun aux deux : overflow: hidden fige une animation au défilement, overflow: clip la laisse vivre.

Spritesheet : vérifiez votre travail Parallaxe : vérifiez votre travail

2. Pourquoi GSAP?¶

Vous savez animer au défilement en CSS. GSAP sert pour ce que le CSS fait mal : enchaîner une séquence, épingler une scène, fonctionner partout (Firefox compris), et déclencher du JavaScript au bon moment.

La règle du cours : le CSS d'abord, GSAP quand le CSS ne suffit pas.

Dans la démo du Petit Chaperon rouge :

la forêt (chapitre 3) et la maison (chapitre 6) sont des scènes GSAP épinglées;
le loup (chapitre 4) se dessine avec DrawSVG, un extension de GSAP.

Voir la vidéo de la démo du Petit Chaperon rouge

3. Les tweens (interpolations)¶

gsap.to(), from(), fromTo(), set() : une cible, des propriétés, des paramètres. Vous connaissez déjà le principe avec Anime.js.

GSAP : tweens et timelines Exercice : Zombi

4. La timeline¶

Enchaîner plusieurs tweens, comme un scénario, et régler le moment de chacun avec le paramètre de position.

La timeline Exercice : Magie

5. ScrollTrigger¶

On accroche la timeline au défilement : start, end, markers, puis scrub et pin. Vous reprenez votre timeline de Magie : vous ne la réécrivez pas, vous lui ajoutez un scrollTrigger.

GSAP : ScrollTrigger Exercice : la magie au défilement

6. Dans votre projet¶

En équipe, puis chacun dans ses chapitres.

Ensemble, sur main : dans index.html, les balises de GSAP et de ScrollTrigger, avant main.js. Dans main.js, gsap.registerPlugin(ScrollTrigger);, une seule fois, avant d'appeler les animate().
Chacun, sur sa branche : dans la fonction animate() d'un de vos chapitres, une première animation GSAP, avec gsap.from(), gsap.to() ou gsap.fromTo(). Pas de scrollTrigger pour l'instant : elle joue au chargement de la page, c'est normal. Voir GSAP : tweens et timelines.
Rappel des garde-fous : chacun épingle au plus la moitié de ses chapitres (sur 3 chapitres, 1 au plus), et au moins une animation de chaque technique (CSS au défilement, GSAP + ScrollTrigger, IntersectionObserver).

Arborescence du dépôt

Rappel : le point de contrôle, ven. 6 nov., au début du cours

Pas besoin d'avancer vos chapitres : on vérifie que la base fonctionne. La structure du dépôt, une <section> avec son id par chapitre (en HTML statique : le JSON viendra ensuite), GSAP et ScrollTrigger branchés, une animation test par personne (sans scrollTrigger : un simple from(), to() ou fromTo()), une pull request fusionnée par personne, au moins le tiers de vos médias dans le dépôt, bien nommés et crédités dans le README.md, et le journal du bloc 2.

Ce que vous faites aujourd'hui, à l'étape 2, compte déjà pour l'animation test.

Le point de contrôle : la liste complète

Devoirs¶

Utilisation de l'IA restreinte : permise seulement pour créer vos médias. Le code, c'est vous! Détails

D'ici le ven. 6 nov., au début du cours 10.2 : le point de contrôle¶

En équipe, sur main :

l'arborescence en place, une <section> avec son id par chapitre, écrite en HTML pour l'instant (le JSON viendra ensuite);
GSAP et ScrollTrigger branchés, registerPlugin une fois dans main.js.

Chaque personne :

une animation test GSAP (from(), to() ou fromTo()) dans un de ses chapitres, sans scrollTrigger;
une pull request fusionnée dans main;
au moins le tiers des médias de ses chapitres, dans assets/images/ch-XX/, bien nommés et crédités dans le README.md;
son journal : les 5 questions du bloc 2.