Componente · Aparecer em grupo

Cascade

Quando você tem vários itens parecidos — cards, ícones, itens de uma lista, linhas de uma tabela — o Cascade faz cada um deles aparecer em sequência, com um pequeno atraso entre um e outro, em vez de todos surgirem de uma vez só. É a diferença entre uma plateia se levantando junto e uma "ola" passando fileira por fileira.

Como pensar nisso

O Cascade é um "envelope" que você coloca ao redor de um grupo de elementos. Cada filho direto marcado como participante entra na fila. Role a página até o quadro abaixo para ver os quatro cartões surgindo em sequência — e role de volta pra cima e desça de novo para ver quantas vezes quiser.

O código

O envelope recebe data-sw="cascade". Cada item que deve participar da fila recebe data-sw-item — sem isso, ele fica de fora e aparece normalmente, sem animação.

HTML

<div data-sw="cascade" data-sw-fx="fade-up" data-sw-gap=".12">
  <article data-sw-item>01</article>
  <article data-sw-item>02</article>
  <article data-sw-item>03</article>
</div>

Ajustes

data-sw-fxQual gesto de entrada cada item usa. São os mesmos 17 nomes do componente Reveal — é o mesmo efeito, só que repetido em fila.Padrão: fade-up · veja todos em Reveal

data-sw-gapO intervalo, em segundos, entre um item começar e o próximo começar. Menor = fila mais rápida e "compacta"; maior = mais espaçado.Padrão: 0.12 · exemplo: data-sw-gap=".25"

data-sw-durDuração da animação de cada item individual, em segundos.Padrão: 0.72

data-sw-easeA personalidade do movimento de cada item.soft · smooth · snap · linear

data-sw-onceSem isso, o grupo inteiro desfaz e refaz toda vez que a pessoa sai e volta pra essa parte da tela. Com isso, acontece uma vez e fica.Não recebe valor

Um exemplo com um intervalo maior e um gesto diferente: data-sw-fx="zoom-in" data-sw-gap=".2" faz cada item crescer a partir do pequeno, um a cada dois décimos de segundo depois do anterior.