Design mobile first : concevoir d’abord pour smartphone

Ce que vous saurez faire à la fin

1. Comprendre la philosophie de GSAP et son intérêt par rapport aux animations CSS
2. Installer GSAP via CDN ou via npm dans un projet web
3. Animer une propriété simple avec gsap.to(), gsap.from(), gsap.fromTo()
4. Enchaîner plusieurs animations dans une timeline GSAP
5. Déclencher des animations au scroll avec ScrollTrigger
6. Optimiser les performances et respecter prefers-reduced-motion

Durée : 5h. Pré-requis : savoir lire et écrire du HTML/CSS/JavaScript, comprendre les sélecteurs CSS, disposer d’un éditeur de code (VS Code), avoir une page HTML simple à animer, prévoir 0 FCFA (GSAP est gratuit pour les usages commerciaux standards depuis le rachat par Webflow en 2024, plus besoin du Club GSAP pour ScrollTrigger ou la plupart des plugins).

Étape 1 — Comprendre pourquoi GSAP plutôt que CSS

Les animations CSS (transitions, keyframes) couvrent 70 % des besoins simples : un bouton qui change de couleur au hover, une carte qui se soulève. Mais dès qu’on attaque les enchaînements complexes, les animations sur scroll, les morphs SVG ou les contrôles précis (mettre en pause, reverse, scrubber), le CSS devient cauchemardesque. GSAP (GreenSock Animation Platform) résout cela avec une API claire, des performances supérieures (jusqu’à 20 fois plus rapide que jQuery), et une compatibilité tous navigateurs y compris les vieux Safari iOS qu’on trouve encore au Sénégal.

Étape 2 — Installer GSAP via CDN pour un site simple

Pour un site WordPress, un site statique ou un test rapide, le CDN suffit. Ajoutez ces deux balises avant la fermeture de body.

<!-- GSAP core -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script>

<!-- ScrollTrigger pour les animations au scroll -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);
  console.log('GSAP version', gsap.version);
</script>

Étape 3 — Installer GSAP via npm pour un projet React, Next ou Astro

Pour un projet moderne, utilisez npm. Plus de bug de version, intégration au tree-shaking, support TypeScript natif.

npm install gsap

// dans un composant React
import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

useEffect(() => {
  gsap.to(".hero-title", { opacity: 1, y: 0, duration: 1 });
}, []);

Étape 4 — Animer avec gsap.to() : la méthode la plus utilisée

gsap.to() anime un élément depuis ses valeurs actuelles vers les valeurs cibles. C’est la méthode la plus utilisée. Le premier argument est le sélecteur (string ou élément DOM), le second est l’objet de propriétés à animer.

// Faire glisser un élément vers la droite en 1 seconde
gsap.to(".carte", {
  x: 200,
  duration: 1,
  ease: "power2.out"
});

// Animer plusieurs propriétés
gsap.to(".bouton-cta", {
  scale: 1.1,
  rotation: 5,
  backgroundColor: "#F97316",
  duration: 0.6,
  ease: "back.out(1.7)"
});

Étape 5 — Animer avec gsap.from() et gsap.fromTo()

gsap.from() anime depuis les valeurs spécifiées VERS les valeurs CSS actuelles. Idéal pour les animations d’entrée. gsap.fromTo() permet de définir explicitement le départ ET l’arrivée, utile quand l’état initial CSS n’est pas exploitable.

// Apparition fade + montée
gsap.from(".titre-hero", {
  opacity: 0,
  y: 50,
  duration: 1.2,
  ease: "power3.out"
});

// fromTo() avec contrôle total
gsap.fromTo(".badge",
  { opacity: 0, scale: 0.5 },
  { opacity: 1, scale: 1, duration: 0.8, ease: "elastic.out(1, 0.5)" }
);

Étape 6 — Maîtriser les easings (courbes d’accélération)

L’easing donne le caractère à l’animation. Une animation linéaire est mécanique. Une bonne courbe paraît naturelle. GSAP propose une vingtaine d’easings avec des modificateurs in, out, inOut.

Étape 7 — Enchaîner avec gsap.timeline()

Une timeline regroupe plusieurs animations qui se déclenchent en séquence ou en parallèle. C’est l’outil indispensable dès que vous avez plus de 3 animations liées (hero animé : logo, titre, sous-titre, bouton, image arrivent dans l’ordre).

const tl = gsap.timeline({ defaults: { duration: 0.8, ease: "power2.out" } });

tl.from(".logo", { opacity: 0, y: -20 })
  .from(".titre-hero", { opacity: 0, y: 30 }, "-=0.3")  // démarre 0.3s avant la fin de la précédente
  .from(".sous-titre", { opacity: 0, y: 20 }, "-=0.4")
  .from(".bouton-cta", { opacity: 0, scale: 0.8, ease: "back.out(1.7)" }, "-=0.2")
  .from(".image-hero", { opacity: 0, x: 50 }, 0);  // démarre au temps 0 absolu

Étape 8 — Déclencher des animations au scroll avec ScrollTrigger

ScrollTrigger est devenu LA killer feature de GSAP. Il déclenche une animation quand un élément entre dans la fenêtre, quand on scrolle un certain pourcentage, ou même synchronise l’animation avec la position du scroll (effet scrubber).

gsap.registerPlugin(ScrollTrigger);

// Animation déclenchée à l'entrée
gsap.from(".section-features", {
  opacity: 0,
  y: 60,
  duration: 1,
  scrollTrigger: {
    trigger: ".section-features",
    start: "top 80%",  // top de l'élément à 80% du viewport
    toggleActions: "play none none reverse"
  }
});

// Animation scrubbée (synchronisée au scroll)
gsap.to(".image-parallax", {
  y: -100,
  scrollTrigger: {
    trigger: ".image-parallax",
    start: "top bottom",
    end: "bottom top",
    scrub: 1
  }
});

Étape 9 — Comprendre les paramètres clés de ScrollTrigger

ScrollTrigger a une API riche. Cinq paramètres à connaître par cœur : trigger (l’élément qui déclenche), start (quand commencer, format « élément viewport »), end (quand finir), scrub (animation suivant le scroll, true ou nombre), pin (épingler l’élément), markers (true en dev pour visualiser les zones de déclenchement). Le marker est votre meilleur ami pour debugger : activez-le, retirez-le en production.

Étape 10 — Animer plusieurs éléments en cascade (stagger)

Pour animer une grille de cartes ou une liste avec un léger décalage entre chaque, utilisez stagger. C’est une fonctionnalité essentielle pour rendre les animations naturelles plutôt que mécaniques.

// Cartes qui apparaissent une par une avec 0.1s de décalage
gsap.from(".carte", {
  opacity: 0,
  y: 40,
  duration: 0.6,
  ease: "power2.out",
  stagger: 0.1,
  scrollTrigger: {
    trigger: ".grille-cartes",
    start: "top 75%"
  }
});

// Stagger plus avancé (depuis le centre)
gsap.from(".item", {
  opacity: 0,
  scale: 0.5,
  duration: 0.5,
  stagger: { each: 0.08, from: "center", grid: "auto" }
});

Étape 11 — Animer du SVG (logos, icônes, illustrations)

GSAP est exceptionnel pour animer du SVG. Vous pouvez tracer un trait progressivement (DrawSVG, plugin gratuit depuis 2024), faire morpher une forme en une autre (MorphSVG), animer position et rotation. Pour un dessin de trait progressif sans plugin, jouez sur stroke-dasharray et stroke-dashoffset.

// Tracer un SVG progressivement (sans plugin)
const path = document.querySelector(".trait");
const length = path.getTotalLength();
gsap.set(path, { strokeDasharray: length, strokeDashoffset: length });
gsap.to(path, {
  strokeDashoffset: 0,
  duration: 2,
  ease: "power1.inOut",
  scrollTrigger: { trigger: path, start: "top 80%" }
});

Étape 12 — Optimiser les performances

Une animation qui rame ruine la perception de qualité, surtout sur mobile bas de gamme dominant le marché ouest-africain. Cinq règles. 1) Animez de préférence transform (x, y, scale, rotation) et opacity : ces propriétés sont accélérées par GPU. 2) Évitez d’animer width, height, top, left : ils déclenchent un reflow coûteux. 3) Utilisez will-change: transform avec parcimonie sur les gros éléments. 4) Limitez le nombre d’animations simultanées : 5 timelines actives en même temps suffisent. 5) Utilisez ScrollTrigger.refresh() après ajout dynamique de contenu.

Étape 13 — Respecter prefers-reduced-motion

Certains utilisateurs souffrent de troubles vestibulaires et désactivent les animations dans leur OS. Votre site doit le respecter. C’est aussi une exigence WCAG 2.3.3.

// Détecter la préférence
const reduceMotion = window.matchMedia("(prefers-reduced-motion: reduce)").matches;

if (!reduceMotion) {
  // Animations complètes
  gsap.from(".hero", { opacity: 0, y: 50, duration: 1 });
} else {
  // Apparition simple ou rien
  gsap.set(".hero", { opacity: 1, y: 0 });
}

// Ou plus élégant : matchMedia
gsap.matchMedia().add("(prefers-reduced-motion: no-preference)", () => {
  gsap.from(".hero", { opacity: 0, y: 50, duration: 1 });
});

Étape 14 — Construire un mini projet de validation

Pour valider vos acquis, construisez une page d’accueil one-page avec : un hero animé en timeline, 3 sections qui apparaissent au scroll, une grille de 6 cartes en stagger, une image avec effet parallax, un footer qui se révèle. Hébergez sur Netlify, Vercel ou Sonatel Cloud. Si tout fonctionne sans saccade sur un smartphone Android entrée de gamme et qu’aucune animation ne se déclenche en mode prefers-reduced-motion, vous maîtrisez les bases solides de GSAP.

Erreurs fréquentes

• Oublier gsap.registerPlugin(ScrollTrigger) : aucune animation au scroll ne fonctionne.
• Animer width et height au lieu de scale : performance catastrophique sur mobile.
• Utiliser gsap.from() sans état initial CSS visible : flash visuel à chaque rechargement.
• Empiler 30 ScrollTrigger sans gestion : page qui se fige.
• Ignorer prefers-reduced-motion : interdit en accessibilité, problème pour utilisateurs sensibles.
• Charger GSAP en haut du body sans defer : retarde le rendu de la page.
• Utiliser duration: 3 sur tout : le site donne l’impression d’être lent.
• Activer markers: true en production : artefacts visuels rouges et verts visibles partout.
• Ne pas tester sur Android entrée de gamme : surprise au lancement.
• Croire qu’il faut payer le Club GSAP pour utiliser ScrollTrigger : depuis 2024, c’est gratuit.

Checklist avant publication d’animations GSAP

• GSAP et ScrollTrigger chargés avec defer ou en bas de body.
• gsap.registerPlugin(ScrollTrigger) appelé une seule fois.
• Toutes les animations utilisent transform et opacity.
• Easings choisis selon le contexte (pas linear partout).
• Timeline pour tout enchaînement supérieur à 2 animations.
• ScrollTrigger configuré avec start, end et toggleActions explicites.
• Stagger utilisé pour les listes et grilles.
• prefers-reduced-motion respecté avec gsap.matchMedia().
• Markers désactivés en production.
• Test fait sur smartphone Android bas de gamme sans saccade.
• ScrollTrigger.refresh() appelé après chargement asynchrone de contenu.
• Aucune animation simultanée non maîtrisée n’excède 5 timelines actives.