Cours 9¶

Retour sur les exercices¶

HTML > HTML vs. JS > HTML

GSAP¶

GSAP est une bibliothèque JavaScript dédiée à l'animation Web.

Animer, mais animer quoi ?¶

GSAP peut animer presque n'importe quelles propriétés CSS :

Comment animer ?¶

Avec ce qu'on appelle un tween (vient de « be tween »). C'est une animation qui calcule toutes les valeurs entre deux points.

gsap.to(".boite", {   
  x: 200,             
  rotation: 90,
  duration: 1.5         
})

Installation¶

npm install gsap

On pourrait écrire directement dans src/main.js, mais afin de bien structurer notre code il est préférable créer un nouveau fichier src/gsap.js.

import gsap from "gsap"

export function gsapAnimations() {

  // Code GSAP ici. Exemple :

  // gsap.from(".boite", { 
  //   x: 200, 
  //   rotation: 90, 
  //   duration: 1.5 
  // })

}

Importer notre fichier gsap dans main.js :

import "./style.css"
import { gsapAnimations } from "./gsap.js"

gsapAnimations()

Le HTML à animer, lui, peut aller soit dans index.html ou dans main.js (avec innerHTML, comme dans le projet de départ de Vite). Ça revient au même.

import "./style.css"
import { gsapAnimations } from "./gsap.js"

document.querySelector('#app').innerHTML = `
<div class="boite"></div>
`;

gsapAnimations();

<body>
  <div class="boite"></div>
  <script type="module" src="/src/main.js"></script>
</body>

Les Tweens¶

to()¶

De l'état initial aux valeurs spécifiées

from()¶

Garde en mémoire l'état initial, mais commence aux valeurs spécifiées vers l'état initial

fromTo()¶

On définit l'état initial et la destination dans la même commande.

set() ¶

Équivalent à un to(), mais instantané.

Les unités¶

Par défaut, GSAP utilise les pixels (px) et les degrés pour les transformations, mais vous pouvez utiliser d'autres unités comme le vw, les radians, etc.

x: 200,       // Place l'élément précisément à 200px du côté gauche
x: "+=200"    // Place l'élément à 200px de plus que sa position
x: '50vw'     // Place l'élément au milieu de l'écran

rotation: 360       // Utilise les degrés pour la rotation
rotation: "1.25rad" // Utilise les radians pour la rotation (2pi = 360 degrés)

Le point de pivot¶

Une rotation (ou une mise à l'échelle) se fait toujours autour d'un point de pivot. Par défaut, ce point est le centre de l'élément.

Le point de pivot se règle avec la propriété CSS transform-origin, ou avec son équivalent GSAP transformOrigin.

gsap.to(".aiguille", {
  //...
  transformOrigin: "left center",  
})

Propriétés spéciales¶

gsap.to(".carte", {
  // Propriétés animées
  y: -20,
  rotation: 5,

  // Paramètres
  duration: 0.6,
  delay: 1,
  repeat: -1,
  repeatDelay: 1,
  yoyo: true
})

GSAP Cheat Sheet

Les courbes d'accélération¶

Le lissage (ease) décrit comment l'animation accélère et ralentit. C'est ce qui distingue une animation robotique d'une animation vivante. GSAP | Ease Visualizer

Exercices Tween¶

Les timelines¶

Un tween anime une chose. Une timeline enchaîne plusieurs tweens, comme un scénario. Par défaut, chaque tween attend la fin du précédent.

gsap.timeline()
  .to(".boite", { x: 100, duration: 1 })        // démarre à 0 s
  .to(".boite", { rotation: 360, duration: 1 }) // démarre après le premier
  .to(".boite", { y: 100, duration: 1 })        // démarre après le deuxième

Le paramètre de position¶

Un 3^e argument ajuste le moment où un tween démarre dans la timeline :

gsap.timeline()
  .to(".boite", { x: 100, duration: 1 })
  .to(".boite", { rotation: 360, duration: 1 }, "-=0.5")
  .to(".ombre", { opacity: 0, duration: 1 }, "<")
  .to(".boite", { y: 100, duration: 1 }, "+=0.2")

Exercice Timeline¶