Premium — Efeitos Base

Opcional / GSAP

Premium — Efeitos Base

Os 29 efeitos pré-programados de sw-premium-animate, os parâmetros que controlam tempo/física/repetição e o comparativo sw-premium-scroll-once. Equivalente funcional do Lab 01 (demo-basic.html) do Smooll original, portado pro SW.

Como usar qualquer efeito

1 Inclua sw.min.js + sw-fx-premium.min.js na página

2 Coloque sw-premium-animate="nome-do-efeito" em qualquer tag. Anima ao carregar.

3 Quer animar ao rolar a tela? Adicione sw-premium-trigger="scroll" na mesma tag. Só isso.

Parâmetros disponíveis

Atributo	Tipo	Descrição
`sw-premium-animate`	string	Nome do efeito pré-fabricado, ex: `"fade-up"`
`sw-premium-duration`	número (s)	Duração da animação
`sw-premium-delay`	número (s)	Atraso antes de começar
`sw-premium-ease`	string GSAP	Curva de física, ex: `"back.out(2)"`
`sw-premium-repeat`	número	Repetições (`-1` = infinito)
`sw-premium-yoyo`	true/false	Vai e volta nas repetições
`sw-premium-stagger`	número (s)	Cascata nos filhos diretos
`sw-premium-from-x` / `-from-y` / `-from-scale` / `-from-rotation` / `-from-opacity`	número	Sobrescreve o estado inicial do efeito
`sw-premium-trigger="scroll"`	string	Ativa ao entrar na tela via ScrollTrigger
`sw-premium-scroll-once`	presença	Com `trigger="scroll"`: anima só na primeira vez, não repete ao sair/voltar

Os 29 efeitos — clique em ↺ pra repetir

fade-up

fade-down

fade-left

fade-right

fade-in

zoom-in

zoom-out

bounce-in

flip-left

flip-right

flip-up

flip-down

rotate-in

rotate-in-cw

skew-left

skew-right

elastic-up

reveal

reveal-left

reveal-right

reveal-center

blur-in

blur-up

fade-up-left

fade-up-right

zoom-blur

drop

stretch-x

stretch-y

Modo Scroll — mesmos efeitos, ativados ao rolar

Basta adicionar sw-premium-trigger="scroll" em qualquer tag. Role até os cards abaixo pra ver disparar (funciona igual pros 29 efeitos, não só os de exemplo aqui).