GSAP et Motion : créer des animations web qui marquent

Les animations font partie des éléments qui distinguent un site ordinaire d'un site mémorable. Elles guident l'attention, créent une hiérarchie visuelle et rendent l'expérience de navigation plus agréable. Dans l'écosystème React, deux outils se distinguent par leur puissance et leur flexibilité : GSAP et Motion.

GSAP : des animations d'impact liées au scroll

GSAP (GreenSock Animation Platform) est une librairie d'animation JavaScript qui existe depuis 2008. Elle est utilisée par Disney, Apple, et des milliers d'autres entreprises pour créer des expériences web spectaculaires.

Animations scroll fluides avec ScrollTrigger

La force de GSAP réside dans sa capacité à créer des animations synchronisées avec le défilement de la page :

import { gsap } from 'gsap';
import { ScrollTrigger } from 'gsap/ScrollTrigger';

gsap.registerPlugin(ScrollTrigger);

gsap.fromTo(
  '.hero-title',
  { opacity: 0, y: 60 },
  {
    opacity: 1,
    y: 0,
    duration: 1,
    ease: 'power3.out',
    scrollTrigger: {
      trigger: '.hero',
      start: 'top 80%',
      end: 'top 20%',
      scrub: 1,
    },
  }
);

Effets de parallaxe pour ajouter de la profondeur

Le parallaxe crée une sensation de profondeur en faisant défiler différents éléments à des vitesses différentes :

gsap.to('.background-layer', {
  yPercent: -30,
  ease: 'none',
  scrollTrigger: {
    trigger: '.section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true,
  },
});

Intégration propre avec React

Avec @gsap/react, GSAP s'intègre parfaitement dans les composants React :

import { useRef } from 'react';
import { useGSAP } from '@gsap/react';

function AnimatedSection() {
  const containerRef = useRef<HTMLDivElement>(null);

  useGSAP(() => {
    gsap.from('.card', { opacity: 0, y: 40, stagger: 0.1 });
  }, { scope: containerRef });

  return <div ref={containerRef}>...</div>;
}

Motion : des micro-interactions natives pour React

Motion a été conçu spécifiquement pour React. Son API déclarative s'intègre naturellement dans le paradigme des composants, rendant les animations intuitives à écrire et à maintenir.

Animations d'entrée et de sortie fluides

AnimatePresence gère automatiquement les animations de sortie lors du démontage des composants :

import { motion, AnimatePresence } from 'motion/react';

function Modal({ isOpen }: { isOpen: boolean }) {
  return (
    <AnimatePresence>
      {isOpen && (
        <motion.div
          initial={{ opacity: 0, scale: 0.9 }}
          animate={{ opacity: 1, scale: 1 }}
          exit={{ opacity: 0, scale: 0.9 }}
          transition={{ duration: 0.2 }}
        >
          Contenu du modal
        </motion.div>
      )}
    </AnimatePresence>
  );
}

Animations coordonnées avec les variants

Les variants permettent de définir des états d'animation réutilisables et de créer des effets en cascade :

const containerVariants = {
  hidden: { opacity: 0 },
  visible: {
    opacity: 1,
    transition: { staggerChildren: 0.1 },
  },
};

const itemVariants = {
  hidden: { opacity: 0, y: 20 },
  visible: { opacity: 1, y: 0 },
};

function CardGrid({ items }: { items: Item[] }) {
  return (
    <motion.ul variants={containerVariants} initial="hidden" animate="visible">
      {items.map(item => (
        <motion.li key={item.id} variants={itemVariants}>
          <Card item={item} />
        </motion.li>
      ))}
    </motion.ul>
  );
}

Transitions de layout automatiques

Motion peut animer automatiquement les changements de taille et de position sans calculs manuels :

<motion.div layout>
  {/* L'animation se fait automatiquement lors des changements */}
  {isExpanded && <ExpandedContent />}
</motion.div>

Combiner les deux outils

Sur les projets web, utiliser GSAP et Motion ensemble permet de tirer parti de leurs forces respectives :

• GSAP + ScrollTrigger : parallaxe des sections, animations d'entrée globales liées au scroll, effets sur le header

• Motion : animations d'entrée des éléments individuels (cartes, textes), transitions de page, micro-interactions

Cette approche hybride permet de créer des expériences riches tout en gardant un code maintenable et performant.

Pour aller plus loin

Les deux librairies disposent d'une excellente documentation et de playgrounds interactifs :

• GSAP : greensock.com - Documentation complète, forums actifs, exemples variés

• Motion : motion.dev - API moderne, exemples React, intégrations Next.js