Lottie Animações

Animação vetorial feita no After Effects/LottieFiles — ícone que anima, "carregando", check de sucesso.

O que é

Toca arquivos .json exportados do Lottie — vetor leve, controlável por código. O SWCore só PILOTA o player; a biblioteca lottie-web não vem incluída (é pesada), você adiciona na sua página quando for usar.

Como funciona

Gatilho configurável: roda sozinho, no hover, ou no clique. sw-ani-mode="scroll" prende os quadros à posição do scroll, igual o Frames.

Exemplos

Instalação — a biblioteca não vem junto Ao vivo

O SWCore pilota o player do Lottie, mas não embute a biblioteca — ela é pesada e nem todo site usa. Você adiciona quando for usar.

Por isso não há demonstração ao vivo nesta página: seria preciso carregar a lib e um arquivo .json real só pra documentação.

<!-- 1) a biblioteca (uma vez na página) -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/bodymovin/5.12.2/lottie.min.js"></script>

<!-- 2) a animação -->
<div sw-ani="lottie" sw-ani-src="/animacao.json" data-sw-autoplay data-sw-loop></div>

Os gatilhos Ao vivo

Cuidado com a grafia: o arquivo e a velocidade aceitam a forma curta sw-ani-*, mas os gatilhos só funcionam como data-sw-*.

Escrever sw-ani-autoplay não dá erro — simplesmente não liga nada.

<!-- toca sozinho, em loop (ex.: "carregando") -->
<div sw-ani="lottie" sw-ani-src="/loading.json" data-sw-autoplay data-sw-loop></div>

<!-- toca ao passar o mouse (ex.: ícone de menu) -->
<div sw-ani="lottie" sw-ani-src="/menu.json" data-sw-hover></div>

<!-- toca a cada clique (ex.: curtir) -->
<div sw-ani="lottie" sw-ani-src="/heart.json" data-sw-click></div>

<!-- ERRADO: ignorado em silêncio -->
<div sw-ani="lottie" sw-ani-autoplay></div>

Velocidade e preso ao scroll Ao vivo

Com sw-ani-mode="scroll" a animação deixa de correr por tempo e passa a avançar conforme a rolagem — o mesmo princípio do Frames, mas com vetor em vez de fotos.

<!-- metade da velocidade -->
<div sw-ani="lottie" sw-ani-src="/x.json" data-sw-autoplay sw-ani-speed="0.5"></div>

<!-- avança conforme o scroll -->
<div sw-ani="lottie" sw-ani-src="/x.json" sw-ani-mode="scroll"></div>

Quando usar Lottie Ao vivo

Vale muito pra ícone animado, confirmação de sucesso, estado de carregamento e ilustração leve: é vetor, escala sem perder nitidez e costuma pesar menos que um GIF ou vídeo equivalente.

Se a animação precisa reagir ao usuário (hover que muda de estado, botão que responde), o Rive resolve melhor, porque já traz a máquina de estados pronta.

<!-- ícone de sucesso que toca uma vez -->
<div sw-ani="lottie" sw-ani-src="/check.json" data-sw-autoplay></div>

Atributos

sw-ani-src

URL do arquivo .json (esta grafia curta funciona)

data-sw-autoplay

toca sozinho ao carregar

data-sw-loop

repete sem parar

data-sw-hover

toca quando o mouse entra

data-sw-click

toca a cada clique

sw-ani-speed

velocidade da reprodução

sw-ani-mode

"scroll" prende os quadros à posição da rolagem

Variantes

data-sw-autoplay

começa sozinho — bom pra "carregando"

data-sw-hover

só anima no mouse — bom pra ícone de menu

data-sw-click

anima a cada clique — bom pra curtir/favoritar

sw-ani-mode="scroll"

o avanço vira função do scroll, como o Frames

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Precisa do pacote swcore.motion.min.css/js + a lib lottie-web (terceiros, não incluída).

Limitações — o que ele não faz

Os gatilhos são data-sw-autoplay / -loop / -hover / -click. A forma curta sw-ani-* vale só pro src, speed e mode.
A biblioteca lottie-web é de terceiros e não vem no pacote: sem ela na página, nada acontece.

← AnteriorCanvas (fundo generativo) Próximo →Rive