GSAP : tweens et timelines¶

Pourquoi GSAP, si le CSS sait animer au défilement?¶

Vous savez déjà animer au défilement en CSS (animation-timeline). Pour votre récit, GSAP sert pour ce que le CSS fait mal :

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

Installer GSAP : par CDN¶

Comme Bootstrap et Anime.js, GSAP se charge avec une balise <script>, avant votre propre script :

<!-- GSAP 3.13 : tous les plugins sont gratuits depuis cette version -->
<script
  src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"
></script>
<script src="js/script.js"></script>

L'objet gsap est alors disponible partout, y compris dans vos modules de chapitres, sans import.

Attention à la version : GSAP 3, pas GSAP 2¶

Comment reconnaître du GSAP 2 :

De Anime.js à GSAP¶

Vous connaissez déjà la structure :

// Anime.js
anime({
  targets: ".box",
  translateX: 200,
  rotate: 90,
  duration: 1500,     // en millisecondes
});

// GSAP
gsap.to(".box", {
  x: 200,
  rotation: 90,
  duration: 1.5,      // en SECONDES
});

Trois différences à retenir :

• La cible est le premier argument, hors de l'objet.
• Les durées sont en secondes.
• Les noms de propriétés sont plus courts : x, y, rotation, scale.

Le tween (l'interpolation) : animer une chose¶

Un tween (de be**tween**) calcule toutes les valeurs entre un départ et une arrivée. En français, c'est une interpolation.

Modifiez le code des exemples : le résultat se met à jour.

to()¶

from()¶

Très utile pour les apparitions : l'élément est déjà à sa place dans le CSS, et from() le fait arriver.

fromTo()¶

Les paramètres (duration, repeat...) vont toujours dans le deuxième objet.

set()¶

Place un élément sans animation. On s'en sert pour préparer l'état de départ d'une scène.

Quoi animer : les propriétés¶

Les propriétés CSS s'écrivent en camelCase : background-color devient backgroundColor.

Les unités : par défaut, des pixels et des degrés. Vous pouvez aussi écrire une chaîne :

x: 200        // 200 px
x: "50vw"     // la moitié de la largeur de l'écran
x: "+=100"    // 100 px de PLUS que la position actuelle

Le point de pivot : une rotation ou une mise à l'échelle se fait autour du centre. Pour changer : transformOrigin: "left bottom".

Comment l'animer : les paramètres¶

Les courbes d'accélération (ease)¶

L'ease, aussi appelé lissage de vitesse, décrit comment l'animation accélère et ralentit. C'est ce qui distingue une animation robotique d'une animation vivante. Vous connaissez le principe : ce sont les principes d'animation du cours 9.1.

ease: "power2.out"    // ralentit à la fin : le plus naturel
ease: "back.inOut"    // dépasse un peu, puis revient
ease: "elastic.out"   // rebondit
ease: "none"          // vitesse constante : pour le défilement

Pour les essayer : le visualiseur d'eases de GSAP .

La timeline : enchaîner¶

Une timeline joue plusieurs tweens les uns après les autres, dans l'ordre où on les ajoute. C'est ce que vous utiliserez pour une scène de votre récit.

const tl = gsap.timeline();

tl.to(".box", { x: 100, duration: 1 })        // commence à 0 s
  .to(".box", { rotation: 360, duration: 1 }) // après le premier
  .to(".box", { y: 100, duration: 1 });       // après le deuxième

Attention : pas de point-virgule entre les .to(), seulement à la fin.

Le paramètre de position¶

Un 3e argument décale le début d'un tween :

Une timeline accepte aussi des paramètres, comme un tween : gsap.timeline({ repeat: -1, repeatDelay: 1 }).

Le mouvement réduit avec GSAP¶

Comme en CSS, prefers-reduced-motion est obligatoire dans votre récit. Avec GSAP, on utilise gsap.matchMedia() : on crée les animations seulement si le visiteur accepte le mouvement.

const mm = gsap.matchMedia();

mm.add("(prefers-reduced-motion: no-preference)", () => {
  // Toutes vos animations GSAP ici
  gsap.to(".box", { x: 120, duration: 1 });
});

Si le réglage change, GSAP annule tout seul ce qui a été créé dans la fonction. Avec le mouvement réduit, les éléments restent à leur état CSS : écrivez donc votre CSS pour que l'état final soit lisible sans animation.

Pour tester : dans Chrome, inspecteur → menu ⋮ → More tools → Rendering → Emulate CSS media feature prefers-reduced-motion.

Pour pratiquer¶

Exercice : Zombi (une interpolation)

Exercice : Magie (une timeline)

Aller plus loin : les extensions¶

Des effets à explorer pour votre récit. Toutes gratuites, sur le même CDN que GSAP.

Exigence du projet : votre récit doit utiliser au moins une de ces extensions, au moins une fois par équipe. ScrollTrigger ne compte pas : il est déjà exigé.

Références¶

• La documentation de GSAP et son aide-mémoire
• Exemples to(), from(), fromTo() et set() : Fragment, cours Web 3 (582-311), TIM Montmorency.