Track Animações

Trilho horizontal: uma fileira de seções que desliza da direita pra esquerda enquanto o visitante rola verticalmente.

O que é

Transforma o scroll vertical normal em deslocamento horizontal por uma faixa de conteúdo — uma linha do tempo, uma galeria de projetos, um catálogo — sem exigir arrastar/clicar.

Como funciona

A seção com data-sw="track" fica presa; o trilho interno (data-sw-track) se move em x proporcionalmente ao progresso do scroll, calculado pela diferença entre a largura total do trilho e a altura visível da seção.

Exemplos

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

Painel

Uma linha do tempo horizontal.

O scroll vertical normal move o trilho pros lados — sem arrastar, sem clicar.

Painel

Só a rolagem que já existe.

Nenhum gesto novo pro visitante aprender.

Painel

E libera no final do trilho.

Depois do último painel, o scroll volta ao normal.

<section data-sw="track">
  <div data-sw-track>
    <div data-sw-section>Painel 1</div>
    <div data-sw-section>Painel 2</div>
    <div data-sw-section>Painel 3</div>
  </div>
</section>

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

Painel

Sem suavização.

data-sw-scrub sem valor gruda o trilho direto no scroll.

Painel

Resposta imediata.

Cada pixel de scroll move o trilho na hora.

Painel

Bom pra trilhos curtos.

Em trilhos longos, a inércia (um número em vez de presente) costuma ficar melhor.

Painel

Quarto e último.

Mais um painel só pra mostrar que o trilho aceita quantos precisar.

<section data-sw="track" data-sw-scrub>
  <div data-sw-track>
    <div data-sw-section>Painel 1</div>
    <div data-sw-section>Painel 2</div>
    <div data-sw-section>Painel 3</div>
    <div data-sw-section>Painel 4</div>
  </div>
</section>

Atributos

data-sw="track"

na seção externa (fica presa na tela)

data-sw-track

no elemento filho direto que é o trilho que desliza

data-sw-section (nos filhos do trilho)

cada painel do trilho — precisa de pelo menos 2

data-sw-end / data-sw-scrub

mesmo significado do Pin (padrão: seções × 100%)

Variantes

Nenhum.

Eventos

sw:progress

com detail.progress de 0 a 1

API (JavaScript)

Nenhum.

Requisitos

Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore.

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

Precisa de pelo menos 2 data-sw-section dentro do data-sw-track, senão não ativa.

← AnteriorStory Próximo →Frames