Rive vs Lottie: qual usar em 2026

Qual é a diferença entre Rive e Lottie?

O Lottie é um formato de reprodução e uma família de bibliotecas. Ele renderiza animações do Adobe After Effects exportadas como JSON com o plugin Bodymovin, na web, iOS, Android, React Native e Windows. O formato mais recente dotLottie (.lottie) é um contêiner comprimido, mantido pela LottieFiles sob a licença MIT, que pode reunir várias animações, assets, temas e state machines em um único arquivo.

O Rive é uma ferramenta integrada: um editor dedicado mais runtimes open source que reproduzem seu formato binário .riv. Animação, rigging e lógica de state machine são todos criados no editor do Rive e exportados juntos.

Nenhum é estritamente melhor. Eles nasceram de fluxos de trabalho diferentes e ainda refletem isso.

Qual deles suporta state machines e interatividade?

Os dois. A velha afirmação de que "o Lottie não tem interatividade" está desatualizada. Em 2025, a LottieFiles adicionou state machines sem código ao Lottie Creator; a lógica vai dentro do arquivo .lottie e roda no player dotLottie.

O Rive tem state machines no centro do seu design há mais tempo. Uma state machine do Rive pode fazer blend entre animações, empilhar várias delas em camadas, detectar eventos de ponteiro em partes da arte e responder a valores enviados pelo código. O Rive também está migrando seu modelo de controle em runtime dos inputs de state machine (números, booleanos e triggers) para o Data Binding com view models, que adiciona strings, enums, cores, listas e propriedades aninhadas. Os arquivos existentes baseados em inputs continuam funcionando.

A questão prática é onde você quer que a lógica fique e quem vai construí-la. Se os designers já fazem tudo no After Effects, adicionar interações no Lottie Creator mantém esse pipeline. Se você está criando um personagem interativo do zero, com vários estados entre os quais seu app alterna, o editor do Rive foi feito exatamente para isso.

Para entender melhor como funcionam as state machines do Rive, veja State machine do Rive: inputs, triggers e humores.

Qual gera arquivos menores?

Depende da animação, e não existe um benchmark neutro que resolva a questão. O próprio blog do Rive afirma que uma animação Lottie de 240 KB foi recriada no Rive com 16 KB, cerca de 15 vezes menor. É um exemplo do fornecedor, escolhido pelo Rive, e deve ser lido como tal.

Ainda assim, as razões estruturais por trás dessas diferenças são reais. O JSON do Lottie é texto, e as exportações do After Effects costumam incluir dados de keyframe redundantes. O dotLottie reduz essa diferença ao comprimir o JSON com Deflate e compartilhar assets entre animações. O .riv do Rive é um binário compacto, e várias animações no mesmo arquivo podem reutilizar as mesmas formas e bones.

O tamanho do arquivo também é só metade do custo. Os dois precisam de uma biblioteca de player. O Rive publica os tamanhos dos seus runtimes: na web, o build WASM canvas tem 567 KB com compressão brotli, e o canvas-lite tem 222 KB (números de WASM do Rive de janeiro de 2026; nós medimos o runtime canvas-lite 2.44.0 em cerca de 373 KB brotli). Meça o runtime mais os seus arquivos reais nas suas páginas reais antes de decidir. Em um conjunto como o do gráfico, todos os estados do personagem cabem em um único .riv menor que um só clipe de vídeo.

Como são feitas as animações Rive e Lottie?

As animações Lottie são tradicionalmente feitas no After Effects e exportadas com o plugin Bodymovin. Nem todo recurso do After Effects é convertido, então os motion designers aprendem quais efeitos são compatíveis com Lottie. A LottieFiles também oferece o Lottie Creator, um editor na web que cria animações e adiciona state machines diretamente, além de um grande marketplace de animações prontas.

As animações Rive são feitas no editor do Rive. Ele reúne desenho vetorial, rigging com bones, deformação de malha, uma timeline e o grafo da state machine em uma só ferramenta, então quem anima também pode montar a lógica interativa e testá-la no editor antes de exportar. A contrapartida é aprender uma ferramenta nova; o conhecimento de After Effects só se aproveita em parte.

Um terceiro caminho é dispensar a criação nos casos comuns. Conjuntos de animações de personagem com estados padrão (idle, loading, success, error etc.) podem ser gerados a partir de uma ilustração existente, o que atende equipes que têm um mascote, mas não têm motion designer. Seja qual for a origem, confira se o arquivo entregue documenta os nomes da state machine e dos inputs, porque o seu código depende deles.

Quais runtimes são suportados?

Os dois cobrem as principais plataformas.

• Lottie: as bibliotecas originais suportam web, iOS, Android, React Native e Windows. Os players dotLottie acrescentam suporte a arquivos .lottie e às suas state machines.
• Rive: runtimes oficiais para web (JS/WASM), React, plataformas Apple (iOS, macOS, tvOS, visionOS), Android, Flutter e React Native, todos com licença MIT.

Os dois ecossistemas estão em transição, então confira os nomes dos pacotes. O runtime React Native do Rive passou do pacote descontinuado rive-react-native para o @rive-app/react-native, baseado em Nitro, e a documentação web agora recomenda o @rive-app/webgl2. No lado do Lottie, os recursos interativos dependem de usar um player dotLottie em vez de um player antigo só para JSON.

Se o seu alvo for algo fora do comum, como um game engine ou um dispositivo embarcado, confira a lista de runtimes de cada projeto especificamente para essa plataforma, em vez de supor que os dois se equivalem.

Quando escolher o Lottie?

O Lottie é a escolha pragmática quando:

• Seus motion designers trabalham no After Effects e você quer reaproveitar esse trabalho diretamente.
• As animações são em grande parte lineares: um ícone que entra animado, uma ilustração curta, uma explosão de comemoração.
• Você quer começar a partir de uma grande biblioteca de animações existentes.
• Seu app já inclui um player Lottie, então adicionar mais animações custa só os arquivos.
• A interatividade de que você precisa é modesta e as state machines do Lottie Creator dão conta.

A maturidade do Lottie é uma vantagem. Ele está em produção em muitos apps há anos, e ferramentas, tutoriais e respostas da comunidade são fáceis de encontrar. Se você precisa de alguns clipes independentes, e não de um personagem com muitos estados, trocar de ferramenta raramente compensa. Continue usando o que a sua equipe já entrega bem.

Quando escolher o Rive?

O Rive é a melhor escolha quando:

• Um personagem ou componente tem muitos estados que o seu código alterna, como um mascote que fica em repouso, escuta, pensa, fala e comemora.
• As transições entre estados precisam se mesclar suavemente em vez de cortar.
• Partes da arte reagem ao ponteiro, como olhos que seguem o cursor.
• Você quer todos esses estados em um único arquivo pequeno, com um só runtime.
• Você pretende vincular dados ao vivo (texto, números, cores) à animação, algo que o Data Binding do Rive suporta.

Avatares de assistente são um exemplo claro. A biblioteca AI Elements da Vercel inclui um componente Persona feito com Rive, com os estados idle, listening, thinking, speaking e asleep. O Duolingo usa state machines do Rive para a sincronia labial dos personagens. Nos dois casos, a animação é controlada pelo estado do app, e não tocada do início ao fim.

Onde comparar Rive e Lottie com mais detalhes?

Esta página é a visão geral. Cada um destes guias aprofunda uma questão, com fontes e uma tabela:

• Rive vs Lottie: performance e tamanho do runtime
• Alternativas ao Lottie em 2026: 7 opções comparadas
• Alternativas ao Rive: Lottie, Spline, Motion e mais
• Converter Lottie para Rive (e Rive para Lottie ou vídeo)
• dotLottie vs Lottie JSON: o que o .lottie acrescenta
• Lottie vs Rive: state machines e Data Binding
• Lottie vs GIF: tamanho, qualidade e onde cada um funciona
• Lottie vs animação SVG e CSS: quando cada um vence
• Rive vs Motion (Framer Motion): funções diferentes
• Rive vs Spline: 2D interativo vs cenas 3D
• Lottie vs Rive no React Native e no Flutter (2026)
• Editor do Rive vs Lottie Creator vs After Effects: custo

Para formatos de arquivo além desses dois runtimes, veja GIF vs WebM vs MP4 vs Lottie vs Rive.

Perguntas frequentes

O Lottie suporta state machines?

Sim. A LottieFiles adicionou state machines sem código ao Lottie Creator em 2025. A lógica fica armazenada dentro do arquivo dotLottie (.lottie) e roda no player dotLottie, então players Lottie antigos que só leem JSON não vão executá-la. Confira se o player da sua plataforma suporta state machines dotLottie antes de depender delas.

O Rive é mesmo 15 vezes menor que o Lottie?

Esse número vem do próprio blog do Rive, que recriou uma animação Lottie de 240 KB com 16 KB. É um exemplo do fornecedor, não um benchmark independente. Os resultados reais dependem da animação e de você comparar com Lottie em JSON ou com dotLottie comprimido, então meça os seus próprios arquivos.

Dá para converter um arquivo Lottie para Rive?

Não sem perdas e com um clique para qualquer arquivo. Rive e Lottie usam formatos e conjuntos de recursos diferentes, então trabalhos complexos do After Effects geralmente precisam ser refeitos no editor do Rive. Formas e paths simples se transferem com mais facilidade do que efeitos, expressions ou precomps. Reserve tempo para retrabalho em vez de esperar uma conversão direta.

Qual é melhor para o mascote de um app?

O Rive costuma ser melhor para um mascote que reage ao estado do app, porque um único arquivo guarda todos os loops e reações, com transições suaves controladas por código. O Lottie funciona bem se o mascote só toca alguns clipes independentes ou se a sua equipe já o produz no After Effects.

Respostas rápidas deste guia

• Qual é a diferença entre Rive e Lottie?

Fontes

• lottie-web, Airbnb (GitHub)
• dotLottie format, LottieFiles
• State Machines Are Finally in Lottie Creator, LottieFiles
• Rive as a Lottie alternative, Rive
• Runtimes: Getting started, Rive
• Runtime sizes, Rive
• Data binding migration guide, Rive
• How Duolingo animates world characters, Duolingo