Motion vs GSAP : avez-vous besoin des deux ?

La plupart des projets React devraient démarrer avec Motion pour les animations pilotées par les composants et l’état, puis ajouter GSAP uniquement lorsqu’un besoin concret se manifeste — une timeline de défilement scrubée, un séquençage complexe, ou du travail SVG/canvas.

Quiconque a tenté d’intégrer une section de défilement épinglée et scrubée dans une application React connaît le moment où cette question surgit : l’animation fonctionne, un re-rendu l’efface, et l’on commence à se demander si l’on a choisi la mauvaise bibliothèque. Utiliser les deux simultanément est courant, pleinement supporté, et souvent le bon choix pour les sites à fort contenu — mais cela implique un second runtime et un second modèle mental, ce n’est donc pas une valeur par défaut. Cet article compare les deux bibliothèques selon les critères qui orientent réellement le choix.

Deux faits invalident la plupart des comparaisons plus anciennes. Motion (anciennement Framer Motion) est désormais disponible pour React, JavaScript et Vue, et s’importe depuis motion/react plutôt que depuis framer-motion. Il n’est plus exclusivement lié à React. Et GSAP n’est plus payant : grâce à Webflow, l’intégralité de la suite GSAP est désormais gratuite, y compris tous les plugins premium comme SplitText et MorphSVG, qui étaient auparavant réservés aux membres Club GSAP, même pour un usage commercial.

En quoi Motion et GSAP diffèrent-ils ?

La distinction de modèle mental est au cœur de la décision. Motion est déclaratif (on décrit l’état final et la bibliothèque se charge de l’interpolation), tandis que GSAP est impératif et piloté par des timelines, offrant un contrôle fin sur chaque étape, le timing et les fonctions d’accélération.

Avec Motion, on définit des valeurs cibles sous forme de props et la bibliothèque détermine la transition :

import { motion } from "motion/react";

<motion.div
  initial={{ opacity: 0, y: 20 }}
  animate={{ opacity: 1, y: 0 }}
  transition={{ duration: 0.4 }}
/>

Lorsque les valeurs dans animate changent, Motion effectue automatiquement la transition ; les propriétés physiques comme x et scale utilisent la physique des ressorts par défaut, tandis que les propriétés visuelles comme opacity utilisent un easing de type tween. GSAP inverse ce paradigme : on écrit des appels impératifs que l’on enchaîne sur une timeline pour un contrôle séquentiel et décalé. Cette différence — décrire le résultat vs chorégraphier chaque temps fort — prédit mieux quel outil convient à un problème donné que n’importe quel benchmark.

Comparaison de Motion et GSAP selon les critères qui comptent

Voici la comparaison directe sur les axes qu’un développeur frontend évalue lors du choix d’une bibliothèque d’animation : modèle mental, intégration, défilement/timeline, performances, bundle, compatibilité frameworks et licences.

Sur le plan de l’intégration, Motion est conçu pour les applications à base de composants : il anime les transitions entre deux layouts quelconques grâce à une simple prop layout, et AnimatePresence maintient les éléments en vie pour qu’ils puissent s’animer lors de leur sortie du DOM. GSAP justifie sa place grâce aux timelines et à ScrollTrigger, qui constitue la référence pour les animations pilotées par le défilement.

Sur le plan des performances, les deux bibliothèques visent 60 fps en usage courant, et les arguments marketing des éditeurs ne tranchent pas la question. Le moteur hybride de Motion exécute les animations nativement dans le navigateur via la Web Animations API et ScrollTimeline, avec un repli sur JavaScript lorsque la physique des ressorts ou le suivi des gestes est nécessaire. La page d’accueil de Motion affirme que ses APIs sont « jusqu’à 90 % plus légères que leurs équivalents GSAP », mais il s’agit d’un chiffre avancé par l’éditeur lui-même, et non d’une mesure neutre. Il convient de le traiter comme un argument commercial. Ce qui compte, c’est le comportement sur des appareils réels. La relecture de session sur des pages en production permet de détecter les défaillances que les benchmarks ne voient pas : des pertes de frames lors d’animations liées au défilement, ou des décalages de mise en page (layout shift) introduits par une transition d’entrée sur un téléphone d’entrée de gamme.

Sur le plan du bundle, les deux bibliothèques sont modulaires. Motion est tree-shakable avec une empreinte réduite, et le cœur de GSAP est léger, les plugins étant ajoutés à la carte. Sur le plan des licences, Motion est sous licence MIT, et GSAP est désormais distribué sous une licence standard gratuite.

Quand utiliser Motion plutôt que GSAP ?

Optez pour Motion pour les interfaces pilotées par l’état : transitions d’entrée/sortie avec AnimatePresence, animations de layout automatiques, gestes, et transitions de pages au sein d’un arbre de composants. Il s’intègre naturellement au cycle de rendu de React, de sorte que les animations répondent à l’état et aux props sans câblage manuel.

Optez pour GSAP pour les séquences scrubées et chorégraphiées : narration liée au défilement avec ScrollTrigger, timelines décalées, et animations SVG ou canvas que Motion ne cible pas. GSAP anime le CSS, le SVG, le canvas, React, Vue, WebGL, les couleurs, les chaînes de caractères et les chemins de mouvement — la polyvalence dont dépendent les sites marketing et les projets de visualisation de données. Les deux bibliothèques peuvent respecter prefers-reduced-motion, l’accessibilité n’est donc pas un critère de départage ; considérez-la comme une responsabilité partagée dans les deux cas.

Avez-vous besoin des deux ?

Oui : il est courant et pleinement supporté d’utiliser les deux simultanément — Motion pour les micro-interactions au niveau des composants, et GSAP pour les séquences de défilement et de timeline. Cette combinaison est une approche de premier plan dans React. useGSAP() du package @gsap/react est un remplacement direct de useEffect()/useLayoutEffect() qui gère automatiquement le nettoyage, et utilise la technique isomorphique du layout effect, ce qui le rend compatible avec le rendu côté serveur, y compris dans le App Router de Next.js, à condition que le composant soit un composant client :

"use client";
import { useRef } from "react";
import gsap from "gsap";
import { useGSAP } from "@gsap/react";

gsap.registerPlugin(useGSAP);

function Hero() {
  const container = useRef(null);
  useGSAP(() => {
    gsap.from(".title", { y: 40, opacity: 0, duration: 0.6 });
  }, { scope: container });

  return (
    <section ref={container}>
      <h1 className="title">Hello</h1>
    </section>
  );
}

Le coût de l’approche « les deux » est bien réel : deux runtimes d’animation impliquent un poids de bundle cumulatif et deux modèles mentaux à maîtriser au sein de l’équipe. N’ajoutez la seconde bibliothèque que lorsqu’un besoin concret se manifeste, et non par défaut. En pratique, cela signifie que Motion gère vos boutons, modales et transitions de layout, tandis que GSAP prend en charge la section de narration par défilement sur laquelle Motion vous résisterait.

Le verdict

Recommandation par défaut pour une application React : commencer avec Motion seul, et introduire GSAP dès que l’on se heurte à une timeline de défilement scrubée, à un séquençage complexe, ou à du travail SVG/canvas. Mais si un projet est principalement axé sur la narration par défilement, commencer avec GSAP et ne recourir à Motion que si les animations pilotées par l’état des composants prennent de l’ampleur. Les deux bibliothèques sont à jour, gratuites et compatibles avec plusieurs frameworks — le choix est donc une question d’adéquation, non de licence. Choisissez celle que votre pattern d’animation dominant indique, épinglez les versions (Motion v12.42.2, GSAP v3.15.0), et n’ajoutez la seconde que lorsqu’une exigence réelle vous y contraint.

FAQ

Framer Motion est-il mort, et que lui est-il arrivé ?

Framer Motion n'est pas mort ; il a été renommé Motion et est devenu un projet indépendant en 2024, s'étendant au-delà de React pour prendre également en charge JavaScript et Vue. On installe désormais le package 'motion' et on importe depuis 'motion/react' plutôt que depuis 'framer-motion'. Il reste sous licence MIT et est activement maintenu sur la branche v12. Les anciens tutoriels référençant les imports 'framer-motion' fonctionnent toujours via un chemin de compatibilité, mais les nouveaux projets devraient utiliser le nom de package actuel.

GSAP est-il encore payant, ou ai-je besoin d'une licence Club GreenSock ?

GSAP est désormais entièrement gratuit, y compris tous les plugins autrefois payants tels que SplitText, MorphSVG, DrawSVG, ScrollTrigger et ScrollSmoother. Après le rachat de GreenSock par Webflow en 2024, le paywall a été supprimé le 30 avril 2025, et la licence standard a été étendue pour couvrir l'usage commercial. La bibliothèque est gratuite pour tous, que l'on utilise Webflow ou non — aucun abonnement Club GreenSock n'est donc requis pour accéder à quelque fonctionnalité que ce soit.

Puis-je utiliser Motion et GSAP ensemble dans un projet Next.js App Router ?

Oui. Utilisez le hook officiel useGSAP() de GSAP, disponible dans le package '@gsap/react', qui gère le nettoyage et le mode Strict de React, et marquez le composant avec la directive 'use client', car les composants App Router sont des composants serveur par défaut. useGSAP() utilise la technique isomorphique du layout effect, ce qui le rend compatible avec le SSR, à condition qu'il s'exécute dans un composant client. Les composants Motion fonctionnent dans le même arbre pour les animations d'état et de layout, sans conflit.

Motion prend-il en charge les animations déclenchées par le défilement, ou ai-je encore besoin de ScrollTrigger de GSAP ?

Motion prend en charge les animations liées au défilement via son hook useScroll et la ScrollTimeline native, ce qui couvre les effets courants comme les barres de progression et le parallaxe liés à la position de défilement. Pour des narrations de défilement scrubées et précisément séquencées, avec épinglage, snapping et timelines complexes, ScrollTrigger de GSAP offre davantage de contrôle et constitue la référence établie. Si votre travail de défilement se résume à un lien simple entre la progression du défilement et une valeur, Motion suffit ; faites appel à ScrollTrigger lorsque la chorégraphie devient complexe.