Cascade Animações

Revela os filhos diretos de um elemento em cascata, um pouco depois do outro, ao entrar na tela.

O que é

Mesmo motor do Reveal, mas aplicado a uma lista de filhos de uma vez — cards de uma grade, itens de uma lista, colunas de um grid — cada um começando um pouco depois do anterior.

Como funciona

O elemento pai leva data-sw="cascade"; cada filho direto que deve participar leva data-sw-item (sem valor). O efeito de entrada de cada filho é o mesmo dicionário do Reveal, escolhido por data-sw-fx no pai (padrão fade-up).

Quando ele anima

O Cascade dispara de 3 jeitos — a diferença é como a cascata inteira reage ao scroll. Role os três cartões pra fora da tela e volte a subir (nos dois primeiros) ou role bem devagar por dentro deles (no terceiro) pra ver a diferença de verdade, ao vivo.

Sempre que o scroll passa (padrão)

Sem data-sw-once, a cascata inteira reanima toda vez que a lista sai da tela e volta a entrar — todos os itens de novo, em sequência.

<div data-sw="cascade">
  <div data-sw-item>1</div>
  <div data-sw-item>2</div>
  <div data-sw-item>3</div>
</div>

Role pra baixo até sumir da tela e volte a subir — a cascata inteira reanima.

Só a primeira vez

Com data-sw-once no elemento pai, a cascata roda uma única vez e para — nenhum item reanima depois disso, mesmo saindo e voltando pra tela.

<div data-sw="cascade" data-sw-once>
  <div data-sw-item>1</div>
  <div data-sw-item>2</div>
  <div data-sw-item>3</div>
</div>

Role pra baixo e volte — essa cascata não reanima de novo.

Acompanhando o scroll (scrub)

Com data-sw-scrub, a cascata deixa de "disparar e esperar acabar" e passa a seguir a régua do scroll de verdade: anda pra frente enquanto você desce, anda pra trás se você subir, sem duração fixa. data-sw-once não faz sentido junto — o scrub já é sempre reversível pela própria posição do scroll.

<div data-sw="cascade" data-sw-scrub>
  <div data-sw-item>1</div>
  <div data-sw-item>2</div>
  <div data-sw-item>3</div>
</div>

Role bem devagar por cima deste bloco — a cascata anda junto com o scroll, não de uma vez.

Exemplos

Grade com 6 itens — efeito padrão (fade-up) Ao vivo

Rápido de declarar

Só data-sw-item em cada filho, sem escrever nenhum JS

Reaproveita o Reveal

Usa a mesma lista de 17 efeitos, aplicada ao grupo inteiro

Reanima ao voltar

Sem data-sw-once, roda de novo toda vez que a lista reaparece

Intervalo ajustável

data-sw-gap controla o espaço entre um item e o próximo

Só filhos diretos

Netos (filhos de filhos) não entram na cascata sozinhos

Qualquer layout

Funciona em grid, lista ou coluna — não depende de ser grade

<div class="demo-grid" data-sw="cascade" data-sw-fx="fade-up" data-sw-gap="0.15">
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-flash demo-box-icon"></i><span class="demo-box-title">Rápido de declarar</span></div>
    <span class="demo-box-sub">Só <code>data-sw-item</code> em cada filho, sem escrever nenhum JS</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-layout demo-box-icon"></i><span class="demo-box-title">Reaproveita o Reveal</span></div>
    <span class="demo-box-sub">Usa a mesma lista de 17 efeitos, aplicada ao grupo inteiro</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-repeat demo-box-icon"></i><span class="demo-box-title">Reanima ao voltar</span></div>
    <span class="demo-box-sub">Sem <code>data-sw-once</code>, roda de novo toda vez que a lista reaparece</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-slider-alt demo-box-icon"></i><span class="demo-box-title">Intervalo ajustável</span></div>
    <span class="demo-box-sub"><code>data-sw-gap</code> controla o espaço entre um item e o próximo</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-check-circle demo-box-icon"></i><span class="demo-box-title">Só filhos diretos</span></div>
    <span class="demo-box-sub">Netos (filhos de filhos) não entram na cascata sozinhos</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-grid demo-box-icon"></i><span class="demo-box-title">Qualquer layout</span></div>
    <span class="demo-box-sub">Funciona em grid, lista ou coluna — não depende de ser grade</span>
  </div>
</div>
<div class="demo-row demo-replay">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pil sw-btn-sm" data-demo-replay><i class="swi-refresh"></i> Tocar de novo</button>
</div>

Numa lista vertical, com zoom-in e intervalo maior Ao vivo

1º — o primeiro do HTML anima primeiro

A ordem da cascata segue a ordem em que os filhos aparecem no código

2º — a posição visual não importa

Grid, flex-wrap ou coluna: quem manda na ordem é o HTML, não o CSS

3º — reordenar o HTML muda a cascata

Trocar dois filhos de lugar no código troca quem anima primeiro

4º — data-sw-gap="0.3" aqui

Intervalo bem maior que o padrão — a onda fica bem mais lenta e visível

5º — o efeito é o mesmo pra todos

Um só data-sw-fx no pai vale pra cada filho — aqui, zoom-in

6º — a cascata inteira reanima junto

Sai da tela e volta: todos os 6 disparam de novo em sequência, não um por um

<div class="demo-col" data-sw="cascade" data-sw-fx="zoom-in" data-sw-gap="0.3">
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-flash demo-box-icon"></i><span class="demo-box-title">1º — o primeiro do HTML anima primeiro</span></div>
    <span class="demo-box-sub">A ordem da cascata segue a ordem em que os filhos aparecem no código</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-layout demo-box-icon"></i><span class="demo-box-title">2º — a posição visual não importa</span></div>
    <span class="demo-box-sub">Grid, flex-wrap ou coluna: quem manda na ordem é o HTML, não o CSS</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-shuffle demo-box-icon"></i><span class="demo-box-title">3º — reordenar o HTML muda a cascata</span></div>
    <span class="demo-box-sub">Trocar dois filhos de lugar no código troca quem anima primeiro</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-slider-alt demo-box-icon"></i><span class="demo-box-title">4º — data-sw-gap="0.3" aqui</span></div>
    <span class="demo-box-sub">Intervalo bem maior que o padrão — a onda fica bem mais lenta e visível</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-move demo-box-icon"></i><span class="demo-box-title">5º — o efeito é o mesmo pra todos</span></div>
    <span class="demo-box-sub">Um só <code>data-sw-fx</code> no pai vale pra cada filho — aqui, zoom-in</span>
  </div>
  <div class="demo-box" data-sw-item>
    <div class="demo-box-h"><i class="swi-check-circle demo-box-icon"></i><span class="demo-box-title">6º — a cascata inteira reanima junto</span></div>
    <span class="demo-box-sub">Sai da tela e volta: todos os 6 disparam de novo em sequência, não um por um</span>
  </div>
</div>
<div class="demo-row demo-replay">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pil sw-btn-sm" data-demo-replay><i class="swi-refresh"></i> Tocar de novo</button>
</div>

Atributos

data-sw="cascade"

no elemento pai

data-sw-item

em cada filho direto que participa da cascata (sem valor)

data-sw-fx

nome do efeito de entrada de cada item (mesma lista do Reveal, padrão fade-up)

data-sw-dur

duração de cada item (padrão 0.72s) — ignorado quando data-sw-scrub está presente

data-sw-gap

intervalo entre um item e o próximo (padrão 0.12s, entre 0.02 e 2)

data-sw-ease / data-sw-start / data-sw-once

mesmo significado do Reveal

data-sw-scrub

presente = a cascata acompanha a régua do scroll em vez de disparar uma vez; aceita um número (segundos de atraso suave) ou fica vazio pra 1:1 direto com o scroll

data-sw-end

só com data-sw-scrub: onde a cascata termina de "andar" (padrão bottom center)

Variantes

Nenhum.

Eventos

Nenhum.

API (JavaScript)

SWMotion.play(elemento)

dispara manualmente a cascata inteira (o elemento com data-sw="cascade"), sem esperar o scroll — anima todos os filhos data-sw-item em sequência

Requisitos

Mesmo requisito do Reveal: o Motion já vem dentro de swcore.js/swcore.css, só falta o gsap-bundle.js (GSAP e ScrollTrigger juntos) em algum <script> da página.

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

Só anima filhos diretos marcados com data-sw-item — netos (filhos de filhos) não entram na cascata automaticamente.

← AnteriorReveal Próximo →Pin