Animações Premium
Motor declarativo portado do smooll.sanweb.com.br, com
atributos sw-premium-*. Reúne GSAP Core + ScrollTrigger + Draggable + Flip +
Observer + MotionPath + ScrollTo + TextPlugin num único bundle opcional.
Portado, ainda não homologado no SW. Este bundle é 100% opcional — o núcleo
(sw.js, sw-mpa.js, sw-fx.js) continua zero-dependência e
não muda em nada. Só carregue sw-fx-premium.min.js nas páginas onde precisar do GSAP.
Não use sw-premium-link (roteador PJAX) na mesma página que o sw-mpa.js
nativo (View Transitions) — escolha um dos dois sistemas de transição.
1. Entrada — sw-premium-animate
24 efeitos pré-programados. Use sw-premium-trigger="scroll"
para disparar via ScrollTrigger ao rolar a página.
2. Texto — sw-premium-split
Divide o texto em caracteres e anima cada um com stagger.
SW Premium
3. Arrastar — sw-premium-drag
Draggable do GSAP, com sw-premium-drag-bounds="parent"
restringindo o movimento à área pai.
4. Mouse — sw-premium-hover-tilt
Inclinação 3D pelo mouse, força configurável.
5. Marquee — sw-premium-marquee
Ticker infinito de texto, sem dependência de largura fixa.
6. Transição de página — sw-premium-link
Roteador PJAX próprio (fetch + troca de
<main id="sw-premium-view">), separado do sw-mpa.js nativo (View
Transitions API). Requer que todas as páginas do fluxo compartilhem o mesmo shell.
| Valor | Comportamento |
|---|---|
fade |
Fade + leve deslocamento vertical (padrão) |
slide / slide-right / slide-up /
slide-down |
Desliza a view inteira na direção indicada |
scale / scale-up / scale-down |
Encolhe/cresce com fade |
flip / flip-x |
Giro 3D no eixo Y ou X |
blur / blur-in / blur-out |
Desfoque de entrada/saída |
wipe / curtain |
Cortina cobrindo a tela |
"saida|entrada" (pipe) |
Tipos diferentes pra saída e entrada |
7. Transição de seção — sw-premium-section
Filhos diretos de um wrapper sw-premium-section="tipo"
entram/saem conforme o scroll (pin + timeline scrubada). Tipos: slide,
slide-down, slide-left, slide-right, mask,
zoom, skew, fold, stack,
h-scroll, h-scroll-right. Suporta pipe ("zoom|fold") para
variar por seção. Desativado abaixo de 992px de largura.
Quick Reference — demais atributos
Referência completa dos ~80 atributos sw-premium-* está em
src/fx-premium/sw-premium-core.js (função parseConfig).
| Atributo | Categoria |
|---|---|
sw-premium-counter / sw-premium-progress-bar /
sw-premium-batch |
Scroll — contadores, barra de progresso, entrada em lote |
sw-premium-scroll-horizontal / sw-premium-timeline |
Scroll — carrossel horizontal e timeline pinada |
sw-premium-draw-svg / sw-premium-path |
SVG — desenho de traço e movimento por path |
sw-premium-flip / sw-premium-observer |
UI — animação de layout (Flip) e fullpage (Observer) |
sw-premium-cursor / sw-premium-magnetic |
Mouse — cursor customizado e campo magnético |
sw-premium-scroll-to / sw-premium-scroll-class /
sw-premium-parallax |
Scroll — âncora suave, classe por scroll e parallax |