Anime no SWCore — documentação e exemplos

O que é

Catálogo oficial de animações do SWCore com aceleração por hardware (GPU), zero dependências externas e peso ultraleve. Inclui suporte nativo a Scroll Reveal com escolha de comportamento (1x única ou repetindo a cada passagem do scroll), animações de disparo temporizado, loops infinitos para badges e status, e micro-interações de hover.

Como funciona

A camada de Scroll usa IntersectionObserver nativo de alta performance para monitorar a viewport. Ao entrar na tela, adiciona a classe is-revealed. Se configurado como once (padrão), fixa o elemento revelado; se configurado como repeat (ou is-repeat / sw-anime-mnt), reseta ao sair da viewport para re-animar toda vez que o usuário rolar novamente.

Exemplos

1. Scroll Reveal — Animar UMA VEZ SÓ (Padrão) Ao vivo

Estes elementos entram suavemente ao rolar e permanecem revelados:

reveal-up Entra subindo suavemente

reveal-left Entra vindo da esquerda

reveal-right Entra vindo da direita

reveal-zoom Entra com escala suave

<!-- Anima uma única vez quando o elemento entra na tela (Padrão) -->
<div class="reveal-up">Entra subindo</div>
<div class="reveal-left delay-100">Entra da esquerda com delay</div>
<div class="reveal-right delay-200">Entra da direita com delay</div>
<div class="reveal-zoom delay-300">Entra com zoom</div>

2. Scroll Reveal — Animar TODA VEZ que o scroll passar (Repeat / Bidirecional) Ao vivo

Modo Repeat Role para cima e para baixo: ao sair da viewport ele reseta e re-anima toda vez!

class="reveal-up is-repeat"

Re-anima a cada rolagem

sw-anime="repeat"

Efeito Flip 3D contínuo

reveal-zoom is-repeat

Zoom in/out ao rolar

<!-- Opção 1: classe .is-repeat -->
<div class="reveal-up is-repeat">Re-anima a cada passagem do scroll</div>

<!-- Opção 2: atributo sw-anime="repeat" -->
<div class="reveal-flip" sw-anime="repeat">Efeito Flip toda vez que rolar</div>

<!-- Opção 3: sw-anime-mnt (alias compatível) -->
<div class="reveal-zoom" sw-anime-mnt>Zoom bidirecional</div>

3. Playground Interativo de Animações Temporizadas (.sw-ani-*) Ao vivo

Clique nos botões para testar cada efeito ao vivo no card central:

Efeito: sw-ani-bounce-in

Clique nos botões acima para re-animar!

<!-- Como disparar animações temporizadas por classe -->
<div class="sw-ani-bounce-in">Entrada com quique</div>
<div class="sw-ani-flip-x">Giro 3D horizontal</div>
<div class="sw-ani-tada">Comemoração Tada</div>

<!-- Para repetir via JS em cliques de botão: -->
<script>
  function tocarAnimacao(elemento, classe) {
    elemento.className = '';
    void elemento.offsetWidth; // Força reflow
    elemento.className = classe;
  }
</script>

4. Animações Contínuas em Loop (.sw-loop-*) Ao vivo

sw-loop-spin

sw-loop-pulse

sw-loop-float

sw-loop-glow

sw-loop-shake

sw-loop-heartbeat

sw-loop-jello

sw-loop-bounce

<!-- Ícones com animações contínuas em loop -->
<i class="swi-refresh sw-loop-spin"></i>
<i class="swi-heart sw-loop-pulse"></i>
<i class="swi-down-arrow sw-loop-float"></i>
<i class="swi-star sw-loop-glow" style="--sw-glow-color:#f59e0b"></i>
<i class="swi-bell sw-loop-shake"></i>

5. Micro-interações de Hover (.sw-hov-*) — Passe o mouse Ao vivo

sw-hov-lift

Elevação com sombra profunda

sw-hov-glow

Borda neon brilhante

sw-hov-tada

Comemoração festiva

sw-hov-pop

Zoom elástico imediato

sw-hov-skew

Inclinação 3D moderna

sw-hov-shine

Reflexo de luz metálico

<!-- Micro-interações de Hover ao passar o mouse -->
<div class="card sw-hov-lift">Elevação com sombra 3D</div>
<div class="card sw-hov-glow">Brilho neon nas bordas</div>
<div class="card sw-hov-tada">Festa Tada</div>
<div class="card sw-hov-pop">Zoom elástico</div>
<div class="card sw-hov-shine">Reflexo de luz atravessando</div>

Atributos

class="reveal-*"

animação de entrada no scroll (ex.: reveal-up, reveal-down, reveal-left, reveal-right, reveal-zoom, reveal-flip)

sw-anime="once"

comportamento padrão: anima uma única vez quando o elemento entra na tela

sw-anime="repeat" / class="is-repeat"

anima TODA VEZ que o scroll passar (bidirecional: sai da tela e reseta, entra e reanima)

class="delay-100" a "delay-1000"

atraso escalonado para criar efeito de cascata fluida

class="sw-ani-*"

animações de disparo (ex.: sw-ani-bounce-in, sw-ani-flip-x, sw-ani-tada, sw-ani-jello)

class="sw-loop-*"

animações contínuas em loop (ex.: sw-loop-spin, sw-loop-pulse, sw-loop-float, sw-loop-glow)

class="sw-hov-*"

micro-interações de hover (ex.: sw-hov-lift, sw-hov-glow, sw-hov-pop, sw-hov-shine)

Variantes

reveal-up, reveal-down, reveal-left, reveal-right, reveal-zoom, reveal-flip

Scroll Reveal: Direções e Formas de Entrada

sw-anime="once", sw-anime="repeat"

Modos de Scroll: Animar 1x Só ou Repetir Sempre

sw-ani-fade-up, sw-ani-bounce-in, sw-ani-flip-x, sw-ani-tada, sw-ani-jello

Disparo Temporizado

sw-loop-spin, sw-loop-pulse, sw-loop-float, sw-loop-glow, sw-loop-heartbeat

Loops Contínuos

sw-hov-lift, sw-hov-glow, sw-hov-pop, sw-hov-skew, sw-hov-shine

Micro-interações de Hover

Eventos

Nenhum.

API (JavaScript)