Rive vs Motion (Framer Motion): funções diferentes

O que cada biblioteca anima de fato?

O Motion anima os elementos que seus componentes já renderizam. Você troca uma div por motion.div, descreve os valores inicial e final, e o Motion cuida do meio do caminho: fades, deslizamentos, springs, gestos como hover e toque, animações de saída com AnimatePresence e animações de layout quando um elemento muda de tamanho ou posição.

O Rive renderiza artes que alguém desenhou e animou no editor do Rive. O arquivo .riv contém formas vetoriais, bones, timelines e uma state machine; seu código o carrega em um canvas e diz em qual estado ele deve ficar.

Perguntar qual é melhor é como perguntar se CSS é melhor que uma ilustração. Eles respondem a perguntas diferentes.

O Framer Motion agora se chama Motion?

Sim. Em 12 de novembro de 2024, o Framer Motion se tornou um projeto independente chamado Motion. Em projetos React, a mudança é só uma troca de nome de pacote: instale motion e substitua os imports de framer-motion por motion/react.

npm uninstall framer-motion
npm install motion

// before
import { motion } from "framer-motion";
// after
import { motion } from "motion/react";

O guia de atualização do Motion trata a API de componentes como inalterada, então o código existente com motion.div continua funcionando depois da troca do import. O projeto também ganhou APIs em JavaScript puro, então o mesmo mecanismo de animação pode ser usado sem React.

Comparativos escritos antes da mudança de nome, incluindo muitos posts "Rive vs Framer Motion", continuam válidos. Leia "Framer Motion" como "Motion" ao longo deste guia. Os nomes do Rive são estáveis em comparação: o editor, o formato .riv e os runtimes mantiveram seus nomes, embora os pacotes recomendados dos runtimes tenham mudado.

Quando você precisa de um asset criado por um designer?

Quando aquilo que se move não existe como elemento na sua página. O Motion só consegue animar o que você renderiza. Um botão, um card, um modal e um item de lista são elementos, então o Motion encaixa naturalmente. Um mascote que pisca, inclina a cabeça e comemora não é; é um desenho com um esqueleto.

Você até poderia montar um personagem com paths SVG inline e animar cada parte com o Motion, mas cada keyframe ficaria no código, cada mudança de design seria uma mudança de código, e a arte ficaria presa à web. É aí que um formato de asset criado por designer compensa. No Rive, um animador desenha o personagem, faz o rig com bones, monta loops e reações em uma timeline e conecta tudo a uma state machine. Os engenheiros recebem um arquivo e uma API pequena.

Hoje o Rive recomenda Data Binding com view models para essa API; a documentação marca os inputs de state machine como legados, mas eles continuam funcionando. O Data Binding sincroniza valores nos dois sentidos entre o seu app e o arquivo, então um número como mood ou um trigger como success vira uma propriedade tipada que você define a partir do React.

Regra prática: se um designer entregaria um arquivo para você, use Rive (ou Lottie). Se você descreveria o movimento em um chamado, use Motion ou CSS.

Dá para usar Rive e Motion juntos?

Sim, e é um padrão comum. O Motion anima o contêiner, o Rive anima o personagem dentro dele. Os dois nunca mexem nos mesmos pixels, então não há conflito.

"use client";
import { AnimatePresence, motion } from "motion/react";
import { useRive } from "@rive-app/react-webgl2";

function Mascot() {
  const { RiveComponent } = useRive({
    src: "/mascot.riv",
    stateMachine: "CharacterViewModelMachine",
    autoplay: true,
    autoBind: true,
  });
  return <RiveComponent style={{ width: 160, height: 160 }} />;
}

export function HelpCard({ open }: { open: boolean }) {
  return (
    <AnimatePresence>
      {open && (
        <motion.aside
          initial={{ opacity: 0, y: 16 }}
          animate={{ opacity: 1, y: 0 }}
          exit={{ opacity: 0, y: 16 }}
        >
          <Mascot />
          <p>Need a hand?</p>
        </motion.aside>
      )}
    </AnimatePresence>
  );
}

Defina o tamanho do wrapper, não do canvas, para que o Rive faça o próprio layout, e anime a opacidade e a posição do wrapper em vez do elemento canvas em si.

Qual pesa mais no seu bundle?

O Rive, com folga, porque inclui um renderizador WebAssembly. A tabela de tamanhos de runtime publicada pelo Rive lista os pacotes web com 222 KB (canvas-lite), 567 KB (canvas) e 648 KB (webgl2) após compressão brotli. A medição feita pela própria Charmotion do @rive-app/canvas-lite 2.44.0 deu cerca de 373 KB com brotli, então confira a versão que você instalar. Os pacotes React envolvem esses runtimes.

O Motion é uma biblioteca JavaScript sem WebAssembly. A documentação explica como reduzir ainda mais o tamanho com o componente m e o LazyMotion, que carregam recursos de animação sob demanda. Não encontramos uma medição independente que valha citar, então meça no seu próprio build com o analisador do seu bundler.

A comparação mais justa é por tarefa. Recriar um personagem com rig usando o Motion significaria entregar a arte como SVG mais muito código de animação. Usar o Rive para um efeito de hover significaria um runtime grande para algo que o CSS faz de graça. Carregue o runtime do Rive só nas rotas que mostram um personagem e use lazy loading (carregamento sob demanda) quando o canvas entrar na área visível com a rolagem.

O Rive também documenta as diferenças entre renderizadores: os pacotes Canvas2D evitam os limites de contexto WebGL, enquanto o webgl2 usa o Rive Renderer, exigido por recursos como o vector feathering.

Qual funciona fora do React?

Os dois, em direções diferentes.

O Motion fica na web. Além da API para React, agora ele oferece funções em JavaScript puro, então você pode animar elementos em uma página HTML simples ou em outro framework. Ele não roda em apps nativos de iOS, Android ou Flutter; essas plataformas têm seus próprios sistemas de animação, como as animações do SwiftUI, o Jetpack Compose e as animações implícitas do Flutter.

O Rive é multiplataforma por natureza. O mesmo arquivo .riv toca pelos runtimes oficiais para web (JavaScript e React), plataformas Apple, Android, Flutter e React Native. Se um mascote aparece no seu site institucional e dentro dos seus apps mobile, um único arquivo Rive e um único conjunto de nomes de propriedades cobrem todos eles, o que mantém o personagem idêntico em todo lugar.

Essa diferença costuma decidir a questão para equipes de produto. O movimento de interface já é específico de cada plataforma, então uma biblioteca web resolve. Um personagem de marca não é, então um arquivo portátil vale mais do que código que só roda no navegador.

Para detalhes de React Native e Flutter, veja Lottie vs Rive no React Native e no Flutter.

Rive ou Motion: qual escolher?

Escolha o Motion se:

• você está animando a sua própria interface: modais, menus, listas, transições de página, layout compartilhado;
• as animações dependem do estado do React, de gestos ou da posição de rolagem;
• você quer tudo em código, sem nenhum asset externo para gerenciar;
• você quer suporte a movimento reduzido já embutido, via MotionConfig reducedMotion="user".

Escolha o Rive se:

• a animação é ilustrada: um mascote, um avatar de assistente, um logo animado ou um controle interativo elaborado;
• ela tem vários estados entre os quais o seu app alterna;
• a mesma arte precisa rodar na web e em apps nativos;
• quem define como ela se move é um designer, não um desenvolvedor.

A maioria dos apps React que usam Rive também usa Motion ou CSS para todo o resto. Se você tem um personagem, mas não tem animador, o Charmotion transforma um personagem, mascote ou logo enviado em 17 animações em poucos minutos: um .riv com view model de Data Binding e inputs legados, além de código pronto para React, web e SwiftUI e exportações em vídeo. O guia de animação em React mostra as duas bibliotecas no mesmo app.

Perguntas frequentes

O Motion substitui o Rive?

Não. O Motion anima elementos do DOM e do React que você já renderiza, usando valores no código. O Rive reproduz arte vetorial criada no editor dele, com uma state machine dentro do arquivo. Um personagem ou mascote é trabalho para o Rive ou o Lottie; transições, mudanças de layout e gestos na sua interface são trabalho para o Motion ou para CSS.

O Motion é gratuito?

O pacote motion é open source e é instalado pelo npm como qualquer outra biblioteca. O site do Motion também vende extras pagos opcionais; confira em motion.dev o que eles incluem hoje. Os runtimes do Rive têm licença MIT, enquanto o editor tem plano gratuito e planos pagos; as exportações do plano gratuito exibem uma splash screen.

O Motion consegue animar um personagem em SVG?

Sim, você pode envolver paths SVG em componentes motion e animar os atributos deles. Funciona para ilustrações simples, mas cada keyframe fica no código e o resultado só roda na web. Para um personagem com rig e muitos estados, um arquivo Rive é muito mais fácil de manter e também roda em apps nativos.

O Rive funciona com Next.js?

Sim. Use o pacote React do Rive em um client component, marcado com a diretiva use client, porque ele renderiza em um canvas no navegador. Coloque o arquivo .riv na pasta public e carregue-o pela URL. Componentes do Motion que usam estado ou gestos também precisam ser client components.

Respostas rápidas deste guia

• O Framer Motion é uma alternativa ao Rive?

Fontes

• Framer Motion is now independent, introducing Motion, Motion
• Upgrade guide, Motion
• Reduce bundle size, Motion
• Accessibility, Motion
• React runtime, Rive
• Runtime sizes, Rive
• Choose a renderer, Rive
• State machine inputs (legacy), Rive