sw-ani-fade
Catálogo funcional / 02
Animações do SW Framework
Movimento curto e intencional para indicar entrada, resposta e continuidade. O catálogo oferece 40 presets: 12 entradas, 7 reveals, 7 loops, 8 hovers e 6 presets de scroll.
Uma execução
12 entradas reproduzíveis
Use para comunicar uma mudança importante. O palco mantém apenas uma animação ativa e aceita exclusivamente classes registradas no catálogo.
Viewport
6 reveals de scroll
O atributo sw-scr usa IntersectionObserver. Sem JavaScript ou com movimento reduzido, o conteúdo continua disponível.
Subida
sw-scr="up"
Descida
sw-scr="down"
Dissolver
sw-scr="fade"
Desfoque
sw-scr="blur"
Escala
sw-scr="pop"
Profundidade
sw-scr="3dl"
Uso restrito
7 loops controláveis
Loops servem para comunicar atividade. O exemplo pode ser pausado por controle, foco ou ponteiro; movimento reduzido os desativa.
sw-loop-pulse
Contrato de movimento
- Transform e opacity são as propriedades principais; filter aparece apenas em presets declarados.
- Entradas usam 450 ms e microinterações usam 180 ms.
- Distância padrão limitada a 24 px na escala base.
- Fallback automático para movimento reduzido.
- Catálogo com 40 presets concluído.
Resposta imediata
8 microinterações de hover
Aplicam apenas reforço visual. A ação, o texto e o foco continuam funcionais em telas sem hover.
Bundle opcional nativo
SW-FX homologado
Scramble, typewriter, split text, scroll scrub, marquee, tilt e magnetismo são melhorias progressivas nativas sem GSAP.
Scramble limitado
Executa em 540 ms em texto de até 160 caracteres.
Typewriter nativo
Digitação progressiva com cursor piscante.
SplitText acessível
Divisão em palavras/caracteres preservando a acessibilidade.
SW-FX SPLIT TEXT
Tilt sutil
Inclinação limitada a 6° para ponteiro fino.
sw-tilt
Magnetismo contido
Deslocamento limitado a 8 px.
Marquee contínuo
Scroll contínuo pausável no hover ou foco.
★ SW-FX MARQUEE ★