Efeitos de entrada Animações

O que é

Todo efeito de animação do SWCore 2 (CSS puro ou GSAP por baixo — o autor nunca escolhe qual motor, o sistema roteia sozinho) segue a MESMA sintaxe: o nome do efeito, opcionalmente um gatilho, uma velocidade e um atraso, tudo no mesmo atributo sw-ani.

Como funciona

Sem gatilho = anima 1× ao carregar a página. Os gatilhos mudam o comportamento: one anima 1 vez quando o elemento entra na tela (scroll), mount reanima toda vez que o scroll passa por ele, scrub prende o progresso da animação direto na posição do scroll (anda pra frente/trás junto), loop fica repetindo sem parar, hover só anima no mouse em cima.

Exemplos

<div sw-ani="fade-up">roda 1× ao carregar a página</div>
<div sw-ani="fade-up one">anima 1 vez quando você rola até ele</div>
<div sw-ani="fade-up mount">reanima toda vez que o scroll passa</div>
<div sw-ani="fade-up scrub">preso à barra de rolagem</div>
<div sw-ani="float loop">fica animando sem parar</div>
<div sw-ani="lift hover">anima só no :hover</div>

<!-- "reveal" é o nome antigo de "one" e continua valendo -->

<!-- troque só o nome do efeito; o resto da sintaxe é sempre igual -->
<div sw-ani="fade-up one">…</div>
<div sw-ani="wipe-l one">…</div>
<div sw-ani="3d-r one">…</div>

<!-- na demonstração acima o gatilho é "one": revela e nao desfaz, entao a
     galeria fica visivel parada. Troque por "mount" se quiser que refaca
     a entrada toda vez que o scroll passar. -->

<div sw-ani="float loop">sobe e desce de leve</div>
<div sw-ani="pulse loop">pulsa chamando atenção</div>
<div sw-ani="shake loop">treme</div>
<div sw-ani="spin loop">gira sem parar</div>

<!-- sem "loop" eles rodam só uma vez -->

<div sw-ani="lift hover">sobe um pouco no mouse</div>
<div sw-ani="bright hover">clareia</div>
<div sw-ani="glow hover">ganha brilho</div>

<!-- qualquer efeito aceita o gatilho hover -->

<!-- velocidade -->
<div sw-ani="fade-up one fast">…</div>
<div sw-ani="fade-up one slow">…</div>
<div sw-ani="fade-up one slower">…</div>

<!-- cascata: o mesmo efeito, com atrasos crescentes -->
<div sw-ani="fade-up one">1</div>
<div sw-ani="fade-up one delay-1">2</div>
<div sw-ani="fade-up one delay-2">3</div>
<div sw-ani="fade-up one delay-3">4</div>
<!-- vai até delay-9 -->

<!-- Existem DOIS caminhos, e cada um tem seu jeito: -->

<!-- 1) efeitos por CSS (one/mount, sem GSAP) — variável CSS -->
<div sw-ani="fade-left one" style="--sw-dist-lg:20rem">entra de bem longe</div>

<!-- pro site inteiro, no seu CSS -->
<style>
  :root { --sw-dist: 4rem; --sw-dist-lg: 6rem; }
</style>

<!-- 2) efeitos por GSAP (scrub e os data-sw) — atributo, em px -->
<div sw-ani="fade-left scrub" sw-ani-distance="180">entra de longe, preso ao scroll</div>

<!-- sw-ani-distance é convertido pra data-sw-distance automaticamente:
     as duas grafias funcionam. Padrão: 80px. -->

Atributos

Variantes

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Nenhuma.

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

• Um elemento só aceita um efeito por vez — sw-ani="fade-up zoom-in" não soma os dois. Pra combinar, aninhe: um efeito no pai, outro no filho.
• Quem prefere menos movimento no sistema (prefers-reduced-motion) recebe a versão sem animação — conte com isso e não esconda informação essencial atrás de um efeito.