Premium — Stagger
Com sw-premium-stagger no elemento pai, cada filho recebe a
animação com um atraso progressivo — cascata sem escrever loop nenhum. Equivalente ao Lab 02
(demo-stagger.html) do Smooll original. A barra fina no topo é
sw-premium-progress-bar, acompanhando o scroll desta página inteira.
1. Stagger Básico — sw-premium-stagger="0.1"
Um valor simples no pai. Todos os filhos diretos animam em sequência automática ao entrar na tela.
2. Stagger Rápido vs Lento
Valores baixos criam ondulação rápida; valores altos criam sequência dramática.
⚡ sw-premium-stagger="0.04"
🐢 sw-premium-stagger="0.2"
3. Stagger em Lista de Cards
Funciona em qualquer tipo de filho — cards, itens de menu, botões, parágrafos. Role e veja entrar em cascata.
Animação de cascata automática nos filhos.
Tudo declarado direto na tag HTML.
Cards, listas, grids, ícones, textos.
Misture com sw-premium-trigger="scroll" e sw-premium-ease.
4. Stagger + Scroll — Grade Grande
Role e veja a grade inteira se montar quadrado por quadrado quando entrar na tela.
CSS obrigatório? O sw-premium-stagger não exige CSS externo — o
motor injeta will-change/backface-visibility automaticamente. O que
você precisa fornecer é o layout dos filhos: sem display:flex ou
display:grid no container, os itens ficam empilhados e a cascata não fica visível.