Extras Animações

Peças pequenas de acabamento: contador regressivo, brilho ligado/pulsante, rotação e escala amarradas ao scroll.

O que é

Utilitários menores que não formam uma categoria própria sozinhos, mas resolvem detalhes de acabamento comuns — um número que conta até uma data, um brilho (glow) estático ou pulsante, e uma rotação ou escala que acompanha o scroll em vez de rodar sozinha pra sempre.

Como funciona

Cada extra amarra uma propriedade visual a uma fonte de progresso — tempo (countdown), um estado ligado no HTML (glow) ou a posição de scroll do próprio elemento (rotate/scale). Rotate e scale usam o mesmo ScrollTrigger das outras peças de Animação: o efeito começa quando o elemento entra no viewport e termina quando ele sai, sem precisar de um palco alto dedicado.

Exemplos

Countdown — regressivo até uma data alvo Ao vivo

<div data-sw="countdown" data-sw-target="2027-12-31T23:59:59" data-sw-format="dhms"></div>

Glow — brilho neon pulsante Ao vivo

TRANSMISSÃO AO VIVO

<h3 data-sw="glow" data-sw-color="#4ade80" data-sw-intensity="22" data-sw-pulse>TRANSMISSÃO AO VIVO</h3>

Rotate — role a página pra ver o giro Ao vivo

Gira 360°

<div data-sw="rotate" data-sw-rotation="360">Gira 360°</div>

Scale — role a página pra ver o tamanho mudar Ao vivo

Cresce

<div data-sw="scale" data-sw-from="0.4" data-sw-to="1">Cresce</div>

Atributos

data-sw="countdown"

no elemento que mostra o texto — vira o contador regressivo

data-sw-target

obrigatório em countdown — data/hora alvo em formato aceito por new Date() (ex.: "2027-12-31T23:59:59")

data-sw-format="dhms"

só em countdown — quais unidades mostrar: qualquer combinação de d/h/m/s (padrão "dhms")

data-sw-separator

só em countdown — texto entre as unidades (padrão ":")

data-sw-labels

só em countdown — sufixos por unidade, separados por vírgula (padrão "d,h,m,s")

data-sw-complete

só em countdown — texto que substitui o contador quando ele chega a zero

data-sw="glow"

no elemento que recebe o brilho neon (funciona melhor em texto)

data-sw-intensity

só em glow — força do brilho em px (padrão 20)

data-sw-color

só em glow — cor do brilho (padrão "currentColor")

data-sw-spread

só em glow — soma um box-shadow do mesmo alcance (padrão 0, desligado)

data-sw-pulse

só em glow — presença liga um pulso contínuo de intensidade (respeita prefers-reduced-motion)

data-sw="rotate"

no elemento que gira conforme ele atravessa o viewport rolando

data-sw-rotation

só em rotate — graus totais do giro, aceita negativo (padrão 360)

data-sw="scale"

no elemento que cresce/encolhe conforme ele atravessa o viewport rolando

data-sw-from / data-sw-to

só em scale — escala inicial e final (padrão 0.5 → 1)

data-sw-start / data-sw-end

em rotate e scale — pontos de gatilho do ScrollTrigger (padrão "top bottom" / "bottom top")

Variantes

Countdown

contador regressivo até uma data alvo

Glow

brilho neon estático ou pulsante

Rotate por scroll

ângulo amarrado à posição de scroll do próprio elemento

Scale por scroll

tamanho amarrado à posição de scroll do próprio elemento

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso — countdown e glow estático não dependem dele, mas glow pulsante, rotate e scale sim). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore.

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

Rotate e scale disparam pela posição do próprio elemento no scroll — dentro de containers com scroll independente (ex. um modal), o ScrollTrigger ainda usa a janela como referência, então o efeito não acompanha esse scroll interno.
Countdown não anima nada visualmente — é texto trocando a cada segundo, então prefers-reduced-motion não se aplica a ele.

← AnteriorInterações Próximo →Texto