Skip to content
Learni
Voir tous les tutoriels
Développement Frontend

Comment maîtriser les animations GSAP avancées en 2026

18 minINTERMEDIATE
ReactJavaScriptAnimationsGSAP
Read in English

Introduction

GSAP est la référence pour créer des animations web performantes et fluides. Contrairement aux transitions CSS limitées, GSAP offre un contrôle précis sur les timelines, les séquences complexes et les interactions basées sur le scroll. En 2026, son utilisation avec des frameworks modernes comme React permet de livrer des expériences utilisateur exceptionnelles tout en maintenant d'excellentes performances. Ce tutoriel intermédiaire vous guide pas à pas pour passer de bases solides à des implémentations avancées.

Prérequis

  • Connaissances solides en JavaScript moderne
  • Node.js 18+ et npm
  • Compréhension de base de React (optionnel mais recommandé)
  • Éditeur de code (VS Code)

Installation de GSAP

terminal
npm create next-app@latest gsap-project --yes
cd gsap-project
npm install gsap

Nous initialisons un projet Next.js et installons la bibliothèque GSAP via npm pour bénéficier des dernières fonctionnalités et plugins.

Configuration du projet

Après l'installation, importez GSAP dans vos composants. GSAP s'intègre parfaitement avec React grâce à son API simple et performante.

Animation simple avec GSAP

components/SimpleAnimation.tsx
'use client';
import { useEffect } from 'react';
import { gsap } from 'gsap';

export default function SimpleAnimation() {
  useEffect(() => {
    gsap.to('.box', {
      duration: 1.5,
      x: 300,
      rotation: 360,
      ease: 'power2.inOut',
      repeat: -1,
      yoyo: true
    });
  }, []);
  return <div className="box w-20 h-20 bg-blue-500 rounded"></div>;
}

Ce composant React déclenche une animation GSAP basique sur un élément. L'utilisation de useEffect garantit que l'animation s'exécute après le montage du DOM.

Création d'une Timeline

components/TimelineAnimation.tsx
'use client';
import { useEffect } from 'react';
import { gsap } from 'gsap';

export default function TimelineAnimation() {
  useEffect(() => {
    const tl = gsap.timeline({ repeat: -1, yoyo: true });
    tl.to('.box1', { x: 200, duration: 1 })
      .to('.box2', { y: 100, duration: 0.8 }, '-=0.5')
      .to('.box1', { rotation: 180, duration: 1 });
  }, []);
  return (
    <>
      <div className="box1 w-16 h-16 bg-red-500"></div>
      <div className="box2 w-16 h-16 bg-green-500 mt-4"></div>
    </>
  );
}

Les timelines permettent de chaîner des animations avec un contrôle précis du timing. L'option yoyo crée des boucles naturelles et fluides.

Intégration de ScrollTrigger

components/ScrollTriggerDemo.tsx
'use client';
import { useEffect } from 'react';
import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

export default function ScrollTriggerDemo() {
  useEffect(() => {
    gsap.to('.scroll-box', {
      scrollTrigger: {
        trigger: '.scroll-box',
        start: 'top 80%',
        end: 'bottom 20%',
        scrub: true
      },
      x: 400,
      rotation: 90
    });
  }, []);
  return <div className="scroll-box w-24 h-24 bg-purple-500"></div>;
}

ScrollTrigger lie les animations au défilement. Le mode scrub permet un contrôle direct par la position du scroll pour des effets immersifs.

Animation avancée avec React

components/AdvancedGSAP.tsx
'use client';
import { useEffect, useRef } from 'react';
import { gsap } from 'gsap';

export default function AdvancedGSAP() {
  const containerRef = useRef<HTMLDivElement>(null);
  useEffect(() => {
    const ctx = gsap.context(() => {
      gsap.from('.item', {
        opacity: 0,
        y: 50,
        stagger: 0.2,
        duration: 0.8,
        ease: 'back.out(1.7)'
      });
    }, containerRef);
    return () => ctx.revert();
  }, []);
  return (
    <div ref={containerRef}>
      {[1,2,3].map(i => <div key={i} className="item">Élément {i}</div>)}
    </div>
  );
}

gsap.context assure un nettoyage automatique des animations dans React. Le stagger crée des effets de cascade professionnels.

Optimisation des performances

utils/gsapConfig.ts
import { gsap } from 'gsap';

// Configuration globale pour les performances
gsap.config({
  force3D: true,
  autoSleep: 60
});

export const createOptimizedTimeline = () => {
  return gsap.timeline({
    defaults: { ease: 'power3.out' },
    onComplete: () => gsap.set('.animated', { willChange: 'auto' })
  });
};

La configuration force3D active l'accélération GPU. autoSleep réduit la consommation CPU quand les animations sont inactives.

Bonnes pratiques

  • Toujours utiliser gsap.context dans les composants React pour éviter les fuites mémoire
  • Préférer les timelines plutôt que des appels gsap.to multiples
  • Activer force3D pour les animations de transformation
  • Nettoyer les ScrollTriggers lors du démontage des composants
  • Tester les performances sur mobile avec scrub et stagger modérés

Erreurs courantes à éviter

  • Oublier d'enregistrer les plugins comme ScrollTrigger avant utilisation
  • Ne pas révoquer les contextes GSAP dans useEffect cleanup
  • Appliquer des animations sur des éléments qui n'existent pas encore dans le DOM
  • Utiliser des valeurs absolues au lieu de relatives dans les timelines complexes

Pour aller plus loin

Approfondissez vos compétences avec nos formations Learni dédiées aux animations web modernes et à GSAP.