Split por letra/palavra/linha, máquina de escrever, embaralhar, marquee, gradiente vivo — mesma sintaxe sw-ani.
O que é
Efeitos específicos pra texto: alguns são CSS puro (gradiente, sublinhado, cortina), outros usam GSAP por baixo (split, type, scramble) — mas todos se escrevem igual, com sw-ani.
Como funciona
No split, a unidade de divisão (letra/palavra/linha) e o efeito de entrada de cada pedaço são palavras dentro do mesmo atributo — sw-ani-stagger ajusta o ritmo entre elas.
Exemplos
Split e type (GSAP) Ao vivo
entra letra a letra
máquina de escrever
<h2 sw-ani="split">entra letra a letra</h2>
<h2 sw-ani="split words blur-up">palavra por palavra, sobe com desfoque</h2>
<h2 sw-ani="split lines" sw-ani-stagger="0.14">linha um<br>linha dois</h2>
<h2 sw-ani="type fast" sw-ani-cursor="▌">máquina de escrever</h2>
<h2 sw-ani="scramble" sw-ani-chars="01">EMBARALHA ATÉ FORMAR</h2>
<span sw-ani="gradient loop text" style="--sw-ani-grad:linear-gradient(90deg,#f59e0b,#ef4444,#f59e0b)">título com gradiente vivo</span>
<a href="#" sw-ani="underline hover">sublinhado que cresce no hover</a>
<div sw-ani="marquee"><span>texto que corre sem parar </span></div>
Atributos
sw-ani-stagger
ritmo entre as unidades do split, em segundos (0 a 0.95)
sw-ani-cursor
caractere do cursor no efeito type — "" remove
sw-ani-chars
conjunto de caracteres usados no embaralhar (scramble)
Variantes
split
letra por letra (padrão) — ou "split words" / "split lines"
type
máquina de escrever
scramble
embaralha até formar o texto certo
sweep
varredura de destaque ao rolar
marquee
texto correndo sem parar
Eventos
Nenhum.
API (JavaScript)
Nenhum.
Requisitos
Split/type/scramble/sweep precisam do pacote swcore.motion.min.css/js (GSAP).
