SWCore / Animações / Cascade

Cascade Animações

Vários itens entrando em sequência, um atrás do outro (stagger) — lista, grade de cards.

O que é

Anima um grupo de itens filhos entrando em sequência, com um pequeno atraso entre cada um, em vez de todos ao mesmo tempo.

Como funciona

Cada [sw-ani-item] dentro do contêiner recebe o mesmo efeito de entrada, defasado no tempo — o efeito em si (fade-up, zoom-in…) é o mesmo vocabulário dos Efeitos de entrada.

Exemplos

Lista em sequência Ao vivo
1
2
3
<div sw-ani="cascade" sw-ani-fx="fade-up">
  <div sw-ani-item>1</div>
  <div sw-ani-item>2</div>
  <div sw-ani-item>3</div>
</div>

<!-- [sw-ani-item] tem que ser filho DIRETO do [sw-ani="cascade"] -->
Trocando o efeito de entrada Ao vivo
sw-ani-fx="zoom-in"
1
2
3
4
sw-ani-fx="fade-left"
1
2
3
4
<div sw-ani="cascade" sw-ani-fx="zoom-in">…</div>
<div sw-ani="cascade" sw-ani-fx="fade-left">…</div>

<!-- se você escrever um efeito que não existe, ele avisa no console
     e cai no fade-up, em vez de quebrar a página -->
Ritmo — o intervalo entre os itens Ao vivo
sw-ani-stagger="0.05" — quase juntos
1
2
3
4
5
6
sw-ani-stagger="0.35" — bem espaçado
1
2
3
4
5
6
<!-- quase simultâneo -->
<div sw-ani="cascade" sw-ani-stagger="0.05">…</div>

<!-- bem espaçado (o máximo é 0.95) -->
<div sw-ani="cascade" sw-ani-stagger="0.35">…</div>
Grade de cartões — o uso real Ao vivo
Serviço A
descrição curta
Serviço B
descrição curta
Serviço C
descrição curta
<div sw-ani="cascade" sw-ani-fx="fade-up" sw-ani-stagger="0.12" class="l l-3">
  <div sw-ani-item class="bg-sur bd r-m">…cartão…</div>
  <div sw-ani-item class="bg-sur bd r-m">…cartão…</div>
  <div sw-ani-item class="bg-sur bd r-m">…cartão…</div>
</div>

Atributos

sw-ani-fx
efeito de cada item — mesmo vocabulário dos Efeitos de entrada (padrão: fade-up)
sw-ani-stagger
atraso entre um item e o próximo, em segundos (até 0,95)
sw-ani-item
marca cada filho que vai entrar — precisa ser filho DIRETO do contêiner

Variantes

fade-up (padrão)
sobe aparecendo
fade-left \| fade-right
entra pelos lados
zoom-in \| zoom-out
entra por escala
flip \| rotate-in \| pop
entradas mais marcadas
(qualquer efeito de entrada)
o mesmo vocabulário da página Efeitos de entrada

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

  • Precisa do pacote swcore.motion.min.css/js.

Limitações — o que ele não faz

  • Os itens precisam ser filhos diretos do contêiner. Se houver uma div no meio do caminho, o cascade não acha e avisa no console.
  • Pra um elemento só entrando, não precisa disto: use sw-ani="fade-up one" direto nele.
← AnteriorMini-componentes animados Próximo →Pin (prende na tela)