Maîtriser GSAP pour des animations avancées

1. Qu'est-ce que GSAP et pourquoi l'utiliser ?

GSAP nous permet de décrire nos animations de manière déclarative. Au lieu de dire "à chaque image, ajoute un petit peu à la position de l'objet", nous dirons simplement "anime la position de cet objet jusqu'à la valeur X, en 2 secondes".

Les avantages sont considérables :

• Code plus lisible et maintenable : La description de l'animation est séparée de la logique de rendu.
• Contrôle total : Mettre en pause, reprendre, inverser, ou enchaîner des animations devient trivial.
• Séquençage facile : Créer des chorégraphies complexes avec les timelines.
• "Easing" avancé : Contrôler l'accélération et la décélération des animations pour un rendu plus naturel et dynamique (effets de rebond, d'élasticité, etc.).

2. Installation et concept de base : le "Tween"

Comme pour Three.js, nous allons installer GSAP via npm. C'est la méthode standard pour un projet moderne.

Dans votre terminal, à la racine de votre projet, lancez :
npm install gsap

Ensuite, au début de votre fichier JavaScript, vous pouvez l'importer :

import gsap from 'gsap';

Le concept fondamental de GSAP est le "tween". Un tween est une animation unique qui fait passer une ou plusieurs propriétés d'un objet d'un état à un autre sur une durée définie.

La fonction la plus utilisée est gsap.to(). Sa syntaxe est : gsap.to(cible, { ...variables }).

• cible: L'objet que l'on veut animer. Pour nous, ce sera une propriété de notre Mesh, comme cube.position ou cube.rotation.
• variables: Un objet JavaScript définissant les propriétés à animer et les paramètres de l'animation.

Exemple très simple :

// Déplace le cube sur l'axe X jusqu'à la position 2, en 1.5 secondes.
gsap.to(cube.position, { duration: 1.5, x: 2 });

Point crucial : Ce code ne va PAS dans la boucle animate(). On l'exécute une seule fois (par exemple, au chargement de la page ou au clic sur un bouton). GSAP gère sa propre boucle interne (ticker) pour mettre à jour les propriétés de l'objet à chaque frame. Votre boucle animate() continue simplement de faire le rendu de la scène avec renderer.render(scene, camera), qui affichera les valeurs mises à jour par GSAP.

Pour bien comprendre les bases, je vous propose de visionner les premières minutes de cette excellente vidéo en français.

Comme vous l'avez vu, la propriété ease est particulièrement intéressante. Elle définit le "rythme" de l'animation. Au lieu d'une vitesse linéaire constante, vous pouvez avoir une accélération douce, un rebond à la fin, etc. GSAP fournit un visualiseur d'easing qui est un outil fantastique pour choisir l'effet désiré.

3. Le pouvoir des Timelines

Créer des tweens individuels, c'est bien, mais la véritable puissance de GSAP pour les animations complexes réside dans les timelines.

Imaginez que vous vouliez qu'un cube :

1. Avance de 2 unités sur l'axe X (durée : 1s).
2. Puis, fasse une rotation de 90° sur Y (durée : 1s).
3. Puis, revienne à sa position d'origine (durée : 1s).

Sans timeline, vous devriez écrire :

// Approche SANS timeline : difficile à maintenir
gsap.to(cube.position, { duration: 1, x: 2 });
gsap.to(cube.rotation, { duration: 1, y: Math.PI / 2, delay: 1 }); // delay = durée de l'anim précédente
gsap.to(cube.position, { duration: 1, x: 0, delay: 2 }); // delay = durée des 2 anims précédentes

C'est fastidieux et fragile. Si vous changez la durée de la première animation, vous devez recalculer tous les delay suivants.

Une timeline est un conteneur qui vous permet d'enchaîner des tweens de manière séquentielle.

// Approche AVEC timeline : propre et flexible
const tl = gsap.timeline();

tl.to(cube.position, { duration: 1, x: 2 })
  .to(cube.rotation, { duration: 1, y: Math.PI / 2 })
  .to(cube.position, { duration: 1, x: 0 });

Le code est plus clair, et les animations se jouent les unes après les autres par défaut. C'est exactement ce dont nous avons besoin pour des "animations complexes et contrôlées".

Retournons à notre vidéo pour voir une démonstration pratique des timelines.

Pour compléter, vous pouvez aussi parcourir rapidement ce document qui résume bien les concepts.

4. Atelier : Chorégraphier notre cube

Mettons tout cela en pratique ! Voici le code de base d'une scène avec un cube. Votre mission est de créer une animation complexe en utilisant une timeline GSAP.

Code de départ :

import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import gsap from 'gsap';

// Scène, Caméra, Renderer
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 100);
camera.position.z = 5;
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// Contrôles
const controls = new OrbitControls(camera, renderer.domElement);

// Objet
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// ----- DÉBUT DE LA ZONE À MODIFIER -----

// Votre code GSAP vient ici !

// ----- FIN DE LA ZONE À MODIFIER -----

// Boucle de rendu (ne pas modifier)
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

animate();

Votre mission :
Créez une timeline GSAP qui s'exécute au chargement de la page et qui effectue la séquence suivante sur le cube :

1. Déplacement latéral : Déplacez le cube de 2 unités vers la droite en 1 seconde, avec un effet de rebond à la fin (ease: 'bounce.out').
2. Rotation : Ensuite, faites tourner le cube de 180 degrés ($\pi$ radians) sur son axe Y en 1 seconde.
3. Mise à l'échelle : Simultanément à la rotation, doublez sa taille (passez scale à 2 sur tous les axes) en utilisant la même durée de 1 seconde.
4. Retour : Enfin, remettez le scale à 1 et la position.x à 0 en même temps, en 1 seconde.

Indice : Pour que deux animations (comme la rotation et la mise à l'échelle) se jouent en même temps dans une timeline, vous pouvez utiliser un paramètre de position spécial. tl.to(...).to(..., "<") indique que le deuxième to() doit démarrer en même temps (<) que le début de l'animation précédente.

// ----- SOLUTION -----

const tl = gsap.timeline({ repeat: -1, yoyo: true, repeatDelay: 1 }); // La timeline se répètera en boucle

tl.to(cube.position, {
    duration: 1,
    x: 2,
    ease: 'bounce.out'
})
.to(cube.rotation, {
    duration: 1,
    y: Math.PI
}, "<") // Démarre en même temps que l'animation précédente
.to(cube.scale, {
    duration: 1,
    x: 2,
    y: 2,
    z: 2
}, "<") // Démarre aussi en même temps
.to(cube.scale, {
    duration: 1,
    x: 1,
    y: 1,
    z: 1,
})
.to(cube.position, {
    duration: 1,
    x: 0,
}, "<"); // Le retour à la position 0 se fait en même temps que le retour à l'échelle 1

// ----- FIN DE LA SOLUTION -----

Conclusion

Félicitations ! Vous avez fait un grand pas en passant des animations manuelles dans la boucle de rendu à des animations déclaratives et contrôlées avec GSAP. C'est une compétence extrêmement précieuse dans le développement web moderne, que ce soit en 2D ou en 3D.

Les points clés à retenir :

• GSAP est une librairie spécialisée pour créer des animations performantes et complexes.
• Un tween (gsap.to()) est une animation unique sur un objet. Il s'écrit en dehors de la boucle animate.
• La propriété ease est essentielle pour donner un rendu naturel et stylé à vos animations.
• Une timeline (gsap.timeline()) est l'outil ultime pour séquencer et contrôler des chorégraphies d'animations.

Aperçu de la prochaine leçon :
Nous avons bien exploré les bases de Three.js de manière "impérative" (en donnant des ordres : "crée une scène", "ajoute un cube", "anime-le"). Dans le prochain module, nous allons entrer dans le monde de React Three Fiber (R3F). Vous découvrirez comment décrire une scène 3D de manière déclarative avec des composants React, ce qui s'aligne parfaitement avec votre expérience de développeur web et la philosophie que nous venons de voir avec GSAP. La première étape sera d'initialiser une application R3F avec le composant <Canvas>. Préparez-vous, c'est un changement de paradigme très puissant