Motion vs GSAP: Você Precisa dos Dois?

A maioria dos projetos React deve começar com Motion para animações orientadas a componentes e estado, e adicionar o GSAP apenas quando uma necessidade concreta surgir — uma timeline de scroll com scrubbing, sequenciamento complexo ou trabalho com SVG/canvas.

Quem já tentou encaixar uma seção de scroll fixada e com scrubbing em um app React conhece bem o momento em que essa pergunta aparece: a animação funciona, um re-render a desfaz, e você começa a questionar se escolheu a biblioteca errada. Usar as duas ao mesmo tempo é comum, totalmente suportado e muitas vezes a decisão certa para sites com muito conteúdo — mas isso tem um custo: um segundo runtime e um segundo modelo mental, portanto não deve ser o padrão. Este artigo compara as duas bibliotecas nos critérios que realmente determinam a escolha.

Dois fatos invalidam a maioria das comparações mais antigas. O Motion (anteriormente Framer Motion) agora está disponível para React, JavaScript e Vue, e é importado de motion/react em vez de framer-motion. Ele não é mais exclusivo do React. E o GSAP não é mais pago: graças à Webflow, todo o conjunto de ferramentas do GSAP agora é gratuito, incluindo todos os plugins extras como SplitText e MorphSVG, que antes eram exclusivos para membros do Club GSAP, inclusive para uso comercial.

Qual é a diferença entre Motion e GSAP?

A divisão de modelos mentais é o cerne de toda a decisão. O Motion é declarativo (você descreve o estado final e ele interpola), enquanto o GSAP é imperativo e orientado a timelines, onde você controla cada etapa com precisão sobre o tempo e o easing.

No Motion, você define os valores-alvo como props e a biblioteca cuida da transição:

import { motion } from "motion/react";

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

Quando os valores em animate mudam, o Motion faz a transição automaticamente entre eles; propriedades físicas como x e scale usam física de mola por padrão, enquanto propriedades visuais como opacity usam easing por interpolação. O GSAP inverte essa lógica: você escreve chamadas imperativas e as encadeia em uma timeline para controle escalonado e sequenciado. Essa diferença — descrever o resultado versus coreografar cada batida — prevê qual ferramenta se encaixa melhor em um determinado problema melhor do que qualquer benchmark.

Motion vs GSAP comparados nos critérios que importam

A seguir, uma comparação direta nos eixos que um desenvolvedor frontend avalia ao adotar uma biblioteca de animação: modelo mental, integração, trabalho com scroll/timeline, desempenho, bundle, alcance de frameworks e licenciamento.

Em termos de integração, o Motion foi construído para apps baseados em componentes: ele anima entre dois layouts quaisquer com uma única prop layout, e o AnimatePresence mantém os elementos vivos para que possam ser animados ao sair do DOM. O GSAP justifica seu lugar por meio de timelines e do ScrollTrigger, que é o padrão para animações orientadas ao scroll.

Em termos de desempenho, ambos buscam 60fps em uso típico, e o material de marketing de nenhum dos dois resolve a questão. O motor híbrido do Motion executa animações nativamente no navegador usando a Web Animations API e ScrollTimeline, recorrendo ao JavaScript quando precisa de física de mola ou rastreamento de gestos. A página inicial do Motion afirma que suas APIs são “até 90% menores do que a alternativa em GSAP”, mas esse é um número do próprio fornecedor, não uma medição neutra. Trate-o como marketing. O que importa é o comportamento em dispositivos reais. A reprodução de sessões de páginas em produção captura a classe de falhas que os benchmarks não detectam: frames perdidos em animações vinculadas ao scroll, ou layout shift causado por uma transição de entrada em um smartphone de nível intermediário.

Em relação ao bundle, ambos são modulares. O Motion é tree-shakable com um footprint pequeno, e o núcleo do GSAP é leve, com plugins adicionados à la carte. Quanto ao licenciamento, o Motion é licenciado sob MIT, e o GSAP agora é distribuído sob uma licença padrão gratuita.

Quando usar Motion vs GSAP?

Use o Motion para UI orientada a estado: transições de entrada/saída com AnimatePresence, animações de layout automáticas, gestos e transições de página dentro de uma árvore de componentes. Ele se encaixa naturalmente no ciclo de renderização do React, de modo que as animações respondem ao estado e às props sem necessidade de configuração manual.

Use o GSAP para sequências scrubadas e elaboradas: narrativas vinculadas ao scroll com ScrollTrigger, timelines escalonadas e animações de SVG ou canvas que o Motion não contempla. O GSAP anima CSS, SVG, canvas, React, Vue, WebGL, cores, strings e caminhos de movimento — a amplitude que sites de marketing e trabalhos de visualização de dados exigem. Ambas as bibliotecas podem respeitar prefers-reduced-motion, portanto a acessibilidade não é um critério de desempate; trate-a como uma responsabilidade compartilhada em qualquer caso.

Você precisa dos dois?

Sim: é comum e totalmente suportado usar os dois — Motion para micro-interações no nível de componente e GSAP para scroll e sequências elaboradas em timelines. A combinação é um caminho de primeira classe no React. O useGSAP() do pacote @gsap/react é um substituto direto para useEffect()/useLayoutEffect() que gerencia o cleanup automaticamente, e utiliza a técnica de layout-effect isomórfico, sendo seguro em ambientes de renderização no servidor, incluindo o Next.js App Router, desde que o componente seja um Client Component:

"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>
  );
}

O custo de usar “os dois” é real: dois runtimes de animação significam peso adicional no bundle e dois modelos mentais para a equipe. Adicione a segunda biblioteca apenas quando uma necessidade concreta surgir, não por padrão. Na prática, isso significa que o Motion cuida dos seus botões, modais e transições de layout, enquanto o GSAP lida com aquela seção de narrativa em scroll que o Motion tornaria difícil de implementar.

O veredicto

Recomendação padrão para um app React: comece apenas com Motion e introduza o GSAP na primeira vez que precisar de uma timeline de scroll com scrubbing, sequenciamento complexo ou trabalho com SVG/canvas. Mas se um projeto for predominantemente baseado em narrativa de scroll, comece com o GSAP e recorra ao Motion apenas se as animações orientadas ao estado de componentes crescerem. Ambos são atuais, gratuitos e compatíveis com múltiplos frameworks, portanto a decisão é sobre adequação, não licenciamento. Escolha aquele que seu padrão de animação dominante indica, fixe as versões (Motion v12.42.2, GSAP v3.15.0) e adicione o segundo apenas quando um requisito real exigir.

Perguntas Frequentes

O Framer Motion foi descontinuado? O que aconteceu com ele?

O Framer Motion não foi descontinuado; ele foi renomeado para Motion e tornou-se um projeto independente em 2024, expandindo seu suporte além do React para JavaScript e Vue. Agora você instala o pacote 'motion' e importa de 'motion/react' em vez de 'framer-motion'. Ele continua licenciado sob MIT e ativamente mantido na linha v12. Tutoriais mais antigos que referenciam imports de 'framer-motion' ainda funcionam por meio de um caminho de compatibilidade, mas novos projetos devem usar o nome atual do pacote.

O GSAP ainda é pago? Preciso de uma licença do Club GreenSock?

O GSAP agora é completamente gratuito, incluindo todos os plugins anteriormente pagos, como SplitText, MorphSVG, DrawSVG, ScrollTrigger e ScrollSmoother. Após a Webflow adquirir a GreenSock em 2024, o paywall foi removido em 30 de abril de 2025, e a licença padrão foi expandida para cobrir uso comercial. A biblioteca é gratuita para todos, independentemente de usar ou não a Webflow, portanto nenhuma assinatura do Club GreenSock é necessária para qualquer funcionalidade.

Posso usar Motion e GSAP juntos em um projeto Next.js com App Router?

Sim. Use o hook oficial useGSAP() do GSAP, disponível no pacote '@gsap/react', que gerencia o cleanup e o React Strict Mode, e marque o componente com a diretiva 'use client', já que os componentes do App Router são Server Components por padrão. O useGSAP() utiliza a técnica de layout-effect isomórfico, sendo seguro para SSR desde que seja executado em um Client Component. Os componentes do Motion funcionam na mesma árvore para animações de estado e layout sem conflito.

O Motion suporta animações acionadas por scroll, ou ainda preciso do ScrollTrigger do GSAP?

O Motion suporta animações vinculadas ao scroll por meio do hook useScroll e do ScrollTimeline nativo, o que cobre efeitos comuns como barras de progresso e parallax vinculados à posição de scroll. Para narrativas de scroll scrubadas e precisamente sequenciadas, com pinning, snapping e timelines complexas, o ScrollTrigger do GSAP oferece mais controle e é o padrão estabelecido. Se o seu trabalho com scroll é uma vinculação direta entre o progresso do scroll e um valor, o Motion é suficiente; recorra ao ScrollTrigger quando a coreografia se tornar complexa.