Cascade Animações

O que é

Quando uma grade de cartões aparece toda de uma vez, fica sem graça; quando cada cartão entra um pouquinho depois do anterior, a seção ganha ritmo. É isso que o Cascade faz: você marca o bloco de fora com sw-ani="cascade" e cada item com sw-ani-item. Quando o bloco aparece na tela, os itens entram em sequência, com o efeito que você escolher.

O efeito de cada item é o mesmo vocabulário dos Efeitos de entrada (fade-up, zoom-in, wipe-l…), escolhido em sw-ani-fx. O intervalo entre um item e o próximo é sw-ani-gap (em segundos). Por padrão, se a pessoa rolar de volta para cima do bloco, os itens "saem" e entram de novo na próxima passagem; com sw-ani-once entram só uma vez. Precisa do pacote de animação.

Quando usar

• Grade de serviços, produtos ou planos aparecendo em sequência.
• Lista de vantagens ou passos de "como funciona".
• Galeria de fotos com entrada suave.
• Para um elemento só, não precisa: use sw-ani="fade-up one" direto nele.

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação. O JS da animação vai antes do swcore.min.js.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Marque o bloco com sw-ani="cascade" e cada item (filho direto) com sw-ani-item. Pronto: eles entram subindo, um depois do outro.

   Sites

   Lojas

   Agendamento

   Tocar de novo

   <div sw-ani="cascade" class="l l-3 gap-4">
     <div sw-ani-item class="bg-sur bd p-m r-m">Sites</div>
     <div sw-ani-item class="bg-sur bd p-m r-m">Lojas</div>
     <div sw-ani-item class="bg-sur bd p-m r-m">Agendamento</div>
   </div>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<div sw-ani="cascade" sw-ani-fx="fade-up" sw-ani-gap="0.15" class="l l-3 gap-4">
  <div sw-ani-item class="bg-sur bd p-g r-m">
    <i class="swi-rocket t-pri"></i>
    <h3>Site institucional</h3>
    <p class="t-p op-8">Sua empresa apresentada do jeito certo.</p>
  </div>
  <div sw-ani-item class="bg-sur bd p-g r-m">…</div>
  <div sw-ani-item class="bg-sur bd p-g r-m">…</div>
</div>

<ul sw-ani="cascade" sw-ani-fx="fade-right" sw-ani-gap="0.1" sw-ani-once>
  <li sw-ani-item><i class="swi-check"></i> Entrega no mesmo dia</li>
  <li sw-ani-item><i class="swi-check"></i> Troca sem burocracia</li>
  <li sw-ani-item><i class="swi-check"></i> Parcelamento em 10x</li>
  <li sw-ani-item><i class="swi-check"></i> Atendimento por WhatsApp</li>
</ul>

Galeria de fotos que "estoura" em sequência Ao vivo

Tocar de novo

<div sw-ani="cascade" sw-ani-fx="pop" sw-ani-gap="0.08" class="l l-4 gap-3">
  <img sw-ani-item src="/galeria/1.webp" width="400" height="300" alt="Morangos">
  <img sw-ani-item src="/galeria/2.webp" width="400" height="300" alt="Legumes">
  <img sw-ani-item src="/galeria/3.webp" width="400" height="300" alt="Frutas">
  <img sw-ani-item src="/galeria/4.webp" width="400" height="300" alt="Café">
</div>

<script>
  const grade = document.querySelector('#produtos');
  SWMotion.play(grade);   // os itens entram de novo, em sequência
</script>

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.motion.min.css, e swcore.motion.min.js antes do swcore.min.js.

Cuidados — erros comuns

• O sw-ani-item tem que ser filho direto do bloco. Se houver uma <div> no meio, nada entra (e aparece um aviso no console).
• Para mudar o ritmo, use sw-ani-gap. O sw-ani-stagger (usado no texto) não vale aqui. (A forma antiga data-sw-gap continua funcionando.)
• Para "uma vez só", use sw-ani-once. Sem ele, os itens somem e entram de novo toda vez que você rola para cima e volta.
• Não coloque sw-ani="fade-up one" nos itens e cascade no bloco: os dois brigam pelo mesmo movimento.
• Efeito com nome errado em sw-ani-fx não quebra a página: ele usa fade-up e avisa no console.
• Com dezenas de itens, use um sw-ani-gap pequeno (0,04–0,06): senão o último demora muito para aparecer.

O que ele não faz

• sw-ani-start aceita só early, normal e late (sem posição livre).
• Quem ativou "reduzir movimento" no aparelho vê os itens já no lugar.
• Itens colocados na lista depois (por JavaScript) só entram na animação depois de SWMotion.refresh().