Track (fileira horizontal) Animações

O que é

É o efeito clássico de portfólio e de "linha do tempo": a rolagem normal (para baixo) vira movimento para o lado. Quando o bloco chega ao topo da tela, ele prende; enquanto a pessoa continua rolando, a fileira desliza mostrando os cartões um a um; quando o último aparece, o bloco solta e a página segue.

São três peças: o bloco (sw-ani="track"), a fileira que anda (sw-ani-track, filho direto do bloco) e os cartões (sw-ani-section, filhos diretos da fileira). A fileira precisa estar lado a lado (flx) e os cartões precisam de largura. sw-ani-end diz quanto de rolagem a travessia inteira consome — o padrão é uma tela por cartão. Precisa do pacote de animação.

Quando usar

• Portfólio: um projeto por cartão.
• Linha do tempo da empresa ou etapas de um serviço.
• Vitrine de produtos em destaque numa landing page.
• Se você não quer prender a página, use uma faixa que anda com a rolagem (sw-ani="marquee scrub", grupo 2 abaixo) ou um carrossel de arrastar (sw-trilho).

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

   Monte as três peças. A fileira lado a lado (flx), os cartões sem encolher (f-sh0) e com largura. Os exemplos ao vivo estão logo abaixo.

   <style>
     .card-trilho { width: 28rem; }   /* cada cartão precisa de largura */
   </style>
   <div sw-ani="track" sw-ani-end="200%" class="ov-hi">
     <div sw-ani-track class="flx gap-3">
       <div sw-ani-section class="card-trilho f-sh0">Projeto 1</div>
       <div sw-ani-section class="card-trilho f-sh0">Projeto 2</div>
       <!-- … até o Projeto 8 -->
     </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.

<section sw-ani="track" class="h-v ov-hi">
  <div sw-ani-track class="flx h-fl">
    <div sw-ani-section class="f-sh0 w-fl h-fl">Passo 1 — Você escolhe</div>
    <div sw-ani-section class="f-sh0 w-fl h-fl">Passo 2 — A gente prepara</div>
    <div sw-ani-section class="f-sh0 w-fl h-fl">Passo 3 — Chega na sua casa</div>
  </div>
</section>

<!-- w-fl: cada painel tem a largura do bloco; h-v: o bloco ocupa a tela toda -->

Essa seção prende a tela de verdade e se solta da moldura enquanto você rola — role bem devagar pra ver o efeito.

Trabalhos recentes

<style>
  .card-portfolio { width: 36rem; }
</style>
<section sw-ani="track" sw-ani-end="300%" class="h-v ov-hi flx f-cl j-ct gap-4">
  <h2>Trabalhos recentes</h2>
  <div sw-ani-track class="flx gap-4">
    <figure sw-ani-section class="card-portfolio f-sh0 bg-sur bd r-m ov-hi m-0">
      <img src="/portfolio/hotel.webp" width="720" height="480" alt="Site do Hotel Centro">
      <figcaption class="p-m"><strong>Hotel Centro</strong> · site e reservas</figcaption>
    </figure>
    <!-- … mais projetos … -->
  </div>
</section>

<p id="contador">1 de 4</p>

<script>
  const bloco = document.querySelector('[sw-ani="track"]');
  bloco.addEventListener('sw:progress', () => {
    document.getElementById('contador').textContent = bloco.dataset.swActive + ' de 4';
  });
</script>

Eventos

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

• As três peças têm que ser pai → filho direto: bloco → fileira → cartões. Uma <div> a mais no meio e nada anda (aparece um aviso no console).
• Sem flx na fileira, os cartões ficam um embaixo do outro e não há o que andar para o lado.
• Sem largura (e sem f-sh0) os cartões se espremem para caber na tela, e a fileira não passa da largura do bloco — nada anda.
• Esqueceu o ov-hi no bloco? Os cartões de fora aparecem vazando e a página ganha rolagem para o lado.
• Não defina sw-ani-end muito pequeno com muitos cartões: a fileira passa rápido demais para alguém ler.

O que ele não faz

• No celular, fileira presa com muitos cartões cansa: considere um carrossel de arrastar (sw-trilho) nas telas pequenas.
• Todos os cartões são carregados junto com a página: com muitas fotos, use Lazy load nelas.
• Quem ativou "reduzir movimento" no aparelho vê a fileira parada, sem prender: os cartões que não cabem ficam escondidos pelo ov-hi.