dotLottie vs Lottie JSON: o que o .lottie acrescenta

O que é um arquivo .lottie?

Um arquivo .lottie é um contêiner definido pela especificação aberta dotLottie, mantida pela LottieFiles sob a licença MIT. A versão 2.0 da especificação o define como um arquivo ZIP comprimido com Deflate, com a extensão .lottie e o tipo MIME application/zip+dotlottie.

Dentro do arquivo:

• manifest.json lista o que o arquivo contém.
• a/ guarda as animações, cada uma um documento Lottie JSON comum.
• i/ guarda as imagens usadas por essas animações.
• s/ guarda as state machines.
• t/ guarda os temas.

Ou seja, o .lottie não substitui o Lottie JSON. Ele o empacota. Cada animação dentro dele continua sendo o mesmo JSON que o After Effects e o Bodymovin geram, por isso as ferramentas convertem facilmente entre os dois e suas animações existentes continuam funcionando.

O .lottie é mesmo menor que o JSON?

Geralmente sim, mas menos do que o marketing sugere quando você considera como os arquivos são transmitidos. A página de preços da LottieFiles diz que os formatos JSON otimizado e dotLottie podem reduzir o tamanho dos arquivos em até 80%, e a página do dotLottie fala em arquivos até 10 vezes menores. As duas são afirmações do fornecedor, sem método publicado.

O mecanismo é compressão comum. O Lottie JSON é um texto verboso, com chaves e números repetidos, então comprime bem. O dotLottie aplica Deflate dentro do arquivo. Só que a maioria dos servidores web e CDNs já comprime o JSON na transferência com gzip ou brotli. Se for o seu caso, um arquivo JSON e um .lottie podem chegar com tamanhos parecidos, porque os dois trafegam comprimidos.

Onde o dotLottie economiza de forma mais confiável:

• Imagens. O JSON muitas vezes embute imagens como texto base64, o que as aumenta em cerca de um terço. O dotLottie as armazena como arquivos binários.
• Várias animações. Um único arquivo substitui várias requisições, e as imagens compartilhadas são armazenadas uma só vez.
• Armazenamento e bundles de apps. Arquivos incluídos dentro de um app mobile não são comprimidos por uma CDN, então a compressão no próprio arquivo conta por completo.

Meça os dois formatos do jeito que seus usuários realmente os recebem antes de decidir apenas pelo tamanho.

Um .lottie pode ter várias animações?

Sim. A pasta a/ pode conter várias animações, listadas no manifesto, e um player dotLottie pode alternar entre elas pelo id. Isso é útil para conjuntos que andam juntos: as versões idle, loading e success de uma ilustração, ou as variantes clara e escura de um ícone.

Agrupar tem vantagens práticas. Seu app ou página carrega um arquivo em vez de vários, as imagens compartilhadas entre animações ficam armazenadas uma só vez em i/, e uma state machine em s/ pode alternar entre as animações do pacote em resposta à interação do usuário.

Há contrapartidas. Os usuários baixam todas as animações do arquivo, mesmo que vejam só uma. Para um conjunto grande, dividir em alguns arquivos pode carregar mais rápido na primeira tela. E cada animação do pacote continua sendo uma timeline Lottie independente. A troca entre elas é um corte ou uma transição interpolada definida na state machine, não uma mistura de duas animações tocando ao mesmo tempo.

É nesse último ponto que o dotLottie e o Rive diferem na abordagem. Um arquivo .riv também guarda várias animações, mas elas compartilham um artboard, um rig e um conjunto de formas, e a state machine pode misturar uma com a outra. Para personagens com muitos estados, compare os dois. Veja Lottie vs Rive: state machines.

O que são temas do dotLottie?

Temas são arquivos na pasta t/ que substituem propriedades de uma animação, como cores, sem editar a animação em si. Uma única ilustração pode vir com um tema claro, um tema escuro e um tema com as cores da marca, e o player aplica um deles em runtime.

Sem temas, a abordagem comum com JSON simples é exportar um arquivo separado para cada esquema de cores, ou editar os valores de cor no JSON via código, o que é frágil. Os temas transformam variações de cor em um recurso oficial do formato, e não em uma gambiarra.

Os temas também se conectam à interatividade. A especificação de state machine do dotLottie inclui uma ação SetTheme, então uma state machine pode trocar de tema em resposta a um input ou evento, por exemplo mudando as cores de um ícone quando ele fica ativo.

Assim como as state machines, os temas só funcionam em players que implementam o formato dotLottie. O player clássico lottie-web lê apenas Lottie JSON simples e não consegue abrir um arquivo .lottie, então, se você depende de temas, verifique o player em cada plataforma em que vai publicar.

Como funcionam as state machines do dotLottie?

Uma state machine do dotLottie é uma definição em JSON armazenada na pasta s/. A LottieFiles adicionou um editor visual para elas no Lottie Creator em 23 de setembro de 2025, para que designers possam criá-las sem escrever o JSON.

A especificação descreve:

• Estados: estados de reprodução que tocam um segmento ou uma animação, além de um estado global cujas transições são verificadas primeiro, independentemente do estado atual.
• Inputs: numérico, string, booleano e evento.
• Transições: instantâneas ou interpoladas com easing cubic-bezier, condicionadas por guards sobre os valores dos inputs.
• Interações: ponteiro entrando, saindo, pressionado, solto e em movimento; clique; conclusão da animação e conclusão do loop.
• Ações: definir, alternar, incrementar ou decrementar inputs, disparar eventos, definir frame ou progresso, definir um tema, abrir uma URL ou disparar um evento personalizado para o seu código.

Isso basta para estados de hover e de clique, toggles, ilustrações com várias etapas e personagens simples. Funciona apenas em players dotLottie; players que leem só JSON tocam a animação sem nenhuma dessa lógica.

O diagrama mostra o padrão loop mais trigger que muitos personagens interativos usam. O dotLottie consegue expressá-lo com inputs e guards; o Rive o expressa com sua própria state machine e Data Binding. Para uma tabela lado a lado, veja Lottie vs Rive: state machines.

Quais players suportam .lottie?

O suporte se espalhou rápido, mas confira cada plataforma:

• Web: o @lottiefiles/dotlottie-web da LottieFiles toca tanto .json quanto .lottie e tem wrappers para React, Vue, Svelte, Solid e Web Components. Ele renderiza com o ThorVG compilado para WASM. O clássico lottie-web toca apenas JSON e teve sua última publicação em maio de 2025.
• React Native: o lottie-react-native suporta .lottie com uma alteração na configuração do Metro e usa o @lottiefiles/dotlottie-react na web. O README atual exige React Native 0.84 ou mais recente e a New Architecture.
• Flutter: o popular pacote lottie é um port não oficial em Dart puro que consegue ler .lottie com um decoder personalizado; a LottieFiles mantém um plugin separado, o dotlottie_flutter, com state machines e temas.

Na web, a contrapartida é o peso do runtime. Pela nossa medição dos pacotes npm em outubro de 2026, o motor WASM do dotlottie-web tem cerca de 433 KB em brotli mais cerca de 23 KB de JavaScript, enquanto o build completo do lottie-web tem cerca de 76 KB com gzip. A LottieFiles afirma que seu renderizador ThorVG é mais rápido e usa menos memória que o motor anterior, uma comparação do fornecedor consigo mesmo, e não com o lottie-web. Para uma única animação JSON simples, o lottie-web é mais leve; para temas, state machines ou muitas animações, o player maior do dotLottie compensa.

A LottieFiles informa que os downloads do dotLottie no npm subiram de cerca de 65.000 por mês em junho de 2024 para 4,7 milhões em novembro de 2025, um número divulgado pelo próprio fornecedor que, ainda assim, mostra a direção do ecossistema.

Você deve usar dotLottie ou Lottie JSON?

Escolha Lottie JSON se você publica uma ou duas animações simples na web, quer o menor player (lottie-web) ou usa uma plataforma ou plugin que aceita apenas JSON.

Escolha dotLottie se você precisa de temas, state machines, várias animações em um só arquivo ou imagens incorporadas, ou se distribui arquivos dentro de um app mobile, onde a compressão no próprio arquivo conta integralmente.

Considere Rive ou vídeo se você está criando um personagem com muitos estados mesclados (Rive) ou se a arte é renderizada em vez de vetorial (vídeo). Para detalhes de performance, veja performance do Rive vs Lottie.

Migrar entre os dois formatos Lottie tem baixo risco em qualquer direção, porque as animações dentro de um .lottie são Lottie JSON comum. Você pode trocar de player primeiro e depois migrar os arquivos aos poucos.

Perguntas frequentes

Posso renomear um arquivo Lottie .json para .lottie?

Não. Um arquivo .lottie é um arquivo ZIP com um manifest.json e uma pasta a/, não um JSON renomeado. Use as ferramentas da LottieFiles ou as bibliotecas do dotLottie para empacotar JSON em .lottie. O caminho inverso funciona: descompacte um .lottie e as animações serão arquivos Lottie JSON comuns.

O lottie-web toca arquivos .lottie?

Não. O lottie-web toca apenas Lottie JSON. Para tocar arquivos .lottie na web, incluindo temas e state machines, use o @lottiefiles/dotlottie-web ou um dos seus wrappers para frameworks. Ele também toca JSON simples, então você pode trocar de player primeiro e migrar os arquivos aos poucos.

O dotLottie é open source?

Sim. O formato dotLottie é uma especificação aberta publicada em dotlottie.io e mantida pela LottieFiles sob a licença MIT. A LottieFiles também publica players open source, como o dotlottie-web. O Lottie Creator, o editor que cria state machines visualmente, faz parte dos planos pagos da LottieFiles.

Preciso do dotLottie para usar state machines no Lottie?

Sim. As state machines do Lottie são definidas pela especificação dotLottie e armazenadas na pasta s/ do arquivo .lottie. Elas só funcionam em players dotLottie. Uma animação JSON simples tocada no lottie-web, lottie-ios ou lottie-android não tem suporte a esse tipo de state machine.

Respostas rápidas deste guia

• O que é um arquivo .lottie?
• O dotLottie é menor que o Lottie JSON?

Fontes

• dotLottie 2.0 specification, dotLottie
• dotLottie format, dotLottie
• dotLottie state machines: Specification, LottieFiles
• State machines are finally in Lottie Creator, LottieFiles
• LottieFiles pricing, LottieFiles
• dotLottie, LottieFiles
• dotlottie-web, LottieFiles (GitHub)
• lottie-react-native, GitHub