Efeito Cascata
em qualquer elemento
Com sm-stagger no elemento pai, cada filho recebe a animação com um atraso progressivo — criando aquele efeito dominó sem escrever uma linha de loop.
Stagger Básico — filhos em cascata
sm-stagger="0.1"Um valor simples no pai. Todos os filhos diretos animam em sequência automática.
Stagger Rápido vs Lento
sm-stagger="0.04" vs "0.2"Valores baixos criam efeito ondulante. Valores altos criam sequência mais dramática.
⚡ sm-stagger="0.04"
🐢 sm-stagger="0.2"
Stagger em Lista de Cards
sm-animate + sm-stagger + sm-trigger="scroll"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 sm-trigger="scroll" e sm-ease.
Stagger + Scroll — Grade Grande
sm-stagger="0.03" sm-trigger="scroll"Role e veja a grade inteira se montar quadrado por quadrado quando entrar na tela.
Stagger em Navegação e Botões
sm-animate="fade-down" sm-stagger="0.08"Perfeito para menus, tags, chips e qualquer elemento de navegação.
CSS OBRIGATÓRIO?
O sm-stagger não exige nenhum CSS externo — o Smooll injeta automaticamente will-change e backface-visibility nos elementos animados.
O que você precisa fornecer é o layout dos filhos: sem um flex ou grid no container, os itens ficam empilhados e o efeito cascata não fica visível.
.meu-container { display: flex; gap: 12px; }
/* ou */
.meu-container { display: grid; grid-template-columns: repeat(3, 1fr); }
Pronto para o próximo nível?
Lab 03 — Scroll Trigger →