GSAP

Les animations CSS ont leurs limites. transition et @keyframes sont suffisants pour des survols de boutons et des entrées simples. Dès qu'on veut séquencer plusieurs éléments, réagir au scroll, ou animer des propriétés non animables en CSS, on bute rapidement.

GSAP — GreenSock Animation Platform — résout ça. C'est une bibliothèque JavaScript qui anime n'importe quelle propriété de n'importe quel objet JavaScript, avec une précision et des performances que CSS ne peut pas égaler.

Ce que GSAP fait concrètement

GSAP interpole des valeurs dans le temps. Vous lui dites : "cet élément, amène-le à x: 200 en 1 seconde avec un ease power2.out". GSAP calcule chaque frame via requestAnimationFrame, met à jour les propriétés, et gère la synchronisation.

Il animate :

• Les propriétés CSS (opacité, couleurs, tailles, marges)
• Les transforms (translation, rotation, scale) via ses propres propriétés optimisées
• Les attributs SVG
• N'importe quelle propriété d'un objet JavaScript — même { volume: 0 } d'un audio player

Pourquoi GSAP plutôt que CSS pur ?

Installation

Via CDN (prototypage rapide)

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>

Pour ScrollTrigger :

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>

Via npm (projets sérieux)

npm install gsap

Import dans votre fichier :

import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
 
gsap.registerPlugin(ScrollTrigger)

Règle importante : chaque plugin doit être enregistré une fois avec gsap.registerPlugin() avant utilisation.

Premier tween

Un tween est une animation d'un point A à un point B. La méthode de base est gsap.to().

<div id="box" style="width: 100px; height: 100px; background: #cdff4f;"></div>

gsap.to('#box', {
  x: 300,       // translateX(300px)
  rotation: 360,
  duration: 1,
  ease: 'power2.out',
})

Cet appel suffit. GSAP sélectionne #box, l'anime vers x: 300 et une rotation complète en 1 seconde.

Les unités et propriétés spéciales

GSAP a ses propres propriétés pour les transforms — plus performantes que les équivalents CSS car GSAP les compose intelligemment.

gsap.to('.element', {
  // Transforms GSAP (toujours en pixels ou degrés)
  x: 200,           // translateX
  y: -50,           // translateY
  rotation: 45,     // rotate (degrés)
  scale: 1.5,       // scale
  scaleX: 2,        // scaleX seulement
  skewX: 15,        // skewX (degrés)
 
  // Propriétés CSS classiques
  opacity: 0,
  backgroundColor: '#ff0000',
  width: '200px',
  borderRadius: '50%',
 
  // Durée et timing
  duration: 1.2,
  delay: 0.3,
})

Pourquoi x plutôt que translateX ? GSAP gère un cache interne des transforms appliqués à chaque élément. Si vous utilisez transform en CSS en parallèle, les deux se marchent dessus. Utiliser x, y, rotation etc. délègue entièrement la gestion des transforms à GSAP.

Sélecteurs et targets

gsap.to() accepte presque tout comme premier argument :

// Sélecteur CSS
gsap.to('.cards', { y: -20, duration: 0.5 })
 
// Élément DOM
const el = document.querySelector('#hero')
gsap.to(el, { opacity: 0 })
 
// Tableau d'éléments
const items = document.querySelectorAll('li')
gsap.to(items, { x: 100, stagger: 0.1 })
 
// Objet JavaScript pur
const obj = { value: 0 }
gsap.to(obj, {
  value: 100,
  duration: 2,
  onUpdate: () => console.log(obj.value),
})

Cette flexibilité est l'une des forces de GSAP — ce n'est pas un outil DOM-only. On peut animer des valeurs et réagir aux changements via les callbacks.

GSAP est installé et vous comprenez ce qu'est un tween. Le chapitre suivant couvre les trois méthodes fondamentales — to, from, fromTo — et toutes les options de timing et d'easing.