Visualizador de Animações Lottie Online
Carregue uma animação Lottie por arquivo ou por JSON colado e teste o comportamento dela antes de levar para o projeto. Os controles permitem pausar, avançar quadro a quadro, alterar a velocidade e ligar o loop, enquanto o painel técnico mostra dimensões, taxa de quadros e duração — informações que a animação carrega, mas que não aparecem em lugar nenhum sem uma ferramenta assim.
- lottie
- animação
- json
- after effects
- bodymovin
como usar
- 01
Carregue a animação
Envie o arquivo JSON exportado pelo Bodymovin ou cole o conteúdo diretamente. A animação não sai do seu navegador.
- 02
Controle a reprodução
Use os controles para pausar, reiniciar, ajustar a velocidade e alternar o loop, observando o comportamento real.
- 03
Confira as informações técnicas
Verifique dimensões, taxa de quadros e duração para saber se a animação cabe no espaço e no orçamento de performance previsto.
- 04
Valide antes de integrar
Se o arquivo estiver corrompido ou não for uma animação Lottie válida, o erro aparece aqui e não no meio da aplicação.
recursos
- Carregamento por arquivo ou JSON colado, sem enviar nada para servidor
- Controles de play, pausa e reinício
- Ajuste de velocidade de reprodução
- Alternância de loop
- Exibição de dimensões, FPS e duração
- Validação do JSON da animação
perguntas frequentes
O que é uma animação Lottie?
Lottie é um formato criado no Airbnb que descreve animações vetoriais em JSON, normalmente exportadas do After Effects pelo plugin Bodymovin. Como o arquivo é vetorial e leve, a mesma animação roda em web, iOS e Android com qualidade de tela cheia e um tamanho muito menor que um vídeo ou um GIF.
Por que minha animação não carrega?
Os casos mais comuns são JSON inválido e arquivo exportado com recursos externos que não vieram junto. Quando a animação depende de imagens externas, é preciso que elas estejam acessíveis, caso contrário só as camadas vetoriais aparecem.
por que criei esta ferramenta
Desenvolvedores e designers precisam validar animações Lottie antes de colocá-las na aplicação, e fazer isso dentro do projeto é lento: cada ajuste exige um novo ciclo de build. Este visualizador oferece controles completos de reprodução e informações técnicas em um lugar só, o que encurta bastante a conversa entre quem exporta a animação e quem vai integrá-la.