Lottie Animações

O que é

Lottie é um formato de animação em arquivo .json: leve, nítido em qualquer tamanho e muito usado para ícones animados, telas de "carregando" e confirmações. O SW Core controla o player para você: tocar sozinho, repetir, tocar ao passar o mouse, a cada clique ou avançar junto com a rolagem — tudo por atributo.

A biblioteca que desenha o Lottie (lottie-web) não vem no SW Core (é pesada e nem todo site usa): você coloca uma linha a mais na página. Se ela chegar depois, o SW Core espera até 8 segundos quando a animação se aproxima da tela e monta sozinho. O arquivo vai em sw-ani-src. Sem nenhum gatilho, a animação fica parada no primeiro quadro.

Quando usar

• "Carregando…" enquanto um formulário envia: sw-ani-autoplay sw-ani-loop.
• Confirmação (pedido feito, mensagem enviada): toca uma vez com sw-ani-autoplay.
• Ícone de menu, curtir, favoritar: sw-ani-hover ou sw-ani-click.
• Ilustração que conta uma história na rolagem: sw-ani-mode="scroll".
• Se a animação precisa reagir sozinha a vários estados (parado → hover → clicado), veja o Rive.

Comece aqui

1. 1

   Coloque o SW Core, o pacote de animação e a biblioteca lottie-web. O swcore.motion.min.js vem antes do swcore.min.js.

   <!-- no <head> -->
   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- no fim do <body> -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Coloque uma caixa com sw-ani="lottie", o arquivo em sw-ani-src e o gatilho. Dê tamanho à caixa — a animação ocupa o espaço que ela tiver.

   <div sw-ani="lottie" sw-ani-src="/animacoes/carregando.json"
        sw-ani-autoplay sw-ani-loop class="w-fl ar-2-1"></div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form id="contato">
  …campos…
  <button type="submit" sw-btn="pri">Enviar</button>
  <div id="enviando" sw-ani="lottie" sw-ani-src="/animacoes/carregando.json"
       sw-ani-autoplay sw-ani-loop class="hid"></div>
</form>

<script>
  document.getElementById('contato').addEventListener('submit', () => {
    document.getElementById('enviando').classList.remove('hid'); // mostra o "carregando"
  });
</script>

<div class="t-ct">
  <div sw-ani="lottie" sw-ani-src="/animacoes/check.json" sw-ani-autoplay class="w-fl ar-2-1"></div>
  <h2>Pedido confirmado!</h2>
</div>

<button type="button" sw-btn="ghost rnd" aria-label="Curtir">
  <span sw-ani="lottie" sw-ani-src="/animacoes/coracao.json" sw-ani-click class="blk w-fl h-fl"></span>
</button>

<div id="mascote" sw-ani="lottie" sw-ani-src="/animacoes/mascote.json"></div>

<script>
  // depois que a página carregou, o player fica em elemento._swLottie
  const player = document.getElementById('mascote')._swLottie;
  player.play();            // tocar
  player.pause();           // pausar
  player.goToAndStop(30, true); // parar no quadro 30
</script>

API (JavaScript)

Precisa de quê

• swcore.motion.min.js e swcore.motion.min.css, antes do swcore.min.js.
• A biblioteca lottie-web (de terceiros, não vem no SW Core): <script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js">.
• Um arquivo .json de animação Lottie (exportado do After Effects com Bodymovin ou baixado do LottieFiles).

Cuidados — erros comuns

• Sem a lottie-web na página nada aparece (o console avisa "Lottie player (window.lottie) não encontrado").
• Caixa sem tamanho = animação invisível. Dê largura e altura (w-fl ar-2-1, ou no CSS da página).
• Sem nenhum gatilho (sw-ani-autoplay, -hover, -click ou sw-ani-mode="scroll") ela fica parada no primeiro quadro.
• Arquivos .lottie (o formato compactado novo do LottieFiles) não são lidos: baixe a versão .json.
• O arquivo .json tem que estar no mesmo site (ou num servidor que libere acesso de outros sites), senão o navegador bloqueia o carregamento.

O que ele não faz

• Não vem com animações prontas: o arquivo é seu (ou baixado de um banco como o LottieFiles).
• Quem ativou "reduzir movimento" no sistema vê só o último quadro, parado.