Story Animações
Narrativa presa ao scroll: uma sequência de passos que trocam de tela conforme o visitante rola, dentro da mesma seção presa.
O que é
Pra contar uma história em etapas sem trocar de página — cada data-sw-step ocupa a tela inteira da seção por um trecho do scroll, e o próximo passo entra por cima do anterior.
Como funciona
A seção com data-sw="story" fica presa (como o Pin) por passos × 100% de altura de tela. A cada trecho de progresso, o passo atual sai com o efeito de leave e o próximo entra com o efeito de enter — a transição escolhida por data-sw-fx.
Exemplos
Essa seção prende a tela de verdade e se solta da moldura enquanto você rola — role bem devagar pra ver o efeito.
Chegada
Uma seção, três capítulos.
A seção prende na tela e os capítulos se revezam por cima, sem trocar de página.
Desenvolvimento
O anterior sai, o próximo entra.
A transição escolhida por data-sw-fx controla como — aqui, "slide" (o padrão).
Conclusão
E o scroll libera de novo.
Assim que o último capítulo passa, a rolagem normal da página continua.
<section data-sw="story">
<div data-sw-step>Passo 1 — chegada</div>
<div data-sw-step>Passo 2 — desenvolvimento</div>
<div data-sw-step>Passo 3 — conclusão</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.
Chegada
Fade — sem direção, só troca.
Bom quando a direção do slide não importa pro conteúdo.
Desenvolvimento
Transição neutra.
Cada capítulo aparece por cima do anterior.
Conclusão
Simples assim.
Sem deslocamento, só opacidade.
<section data-sw="story" data-sw-fx="fade">
<div data-sw-step>Passo 1</div>
<div data-sw-step>Passo 2</div>
<div data-sw-step>Passo 3</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.
Chegada
Zoom — profundidade no lugar da direção.
O capítulo cresce até sumir; o próximo nasce pequeno e chega ao normal.
Desenvolvimento
Sensação de câmera avançando.
Combina bem com fotografia e produto.
Conclusão
Impacto maior que o fade.
Mais chamativo, usar com moderação.
<section data-sw="story" data-sw-fx="zoom">
<div data-sw-step>Passo 1</div>
<div data-sw-step>Passo 2</div>
<div data-sw-step>Passo 3</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.
Chegada
Direção horizontal, sentido único.
Lembra passar página — sempre da direita pra esquerda.
Desenvolvimento
Bom pra listas ordenadas.
Etapas de um processo, por exemplo.
Conclusão
Previsível de propósito.
O visitante aprende o padrão logo no 1º capítulo.
<section data-sw="story" data-sw-fx="left">
<div data-sw-step>Passo 1</div>
<div data-sw-step>Passo 2</div>
<div data-sw-step>Passo 3</div>
</section>Atributos
data-sw="story"data-sw-step (nos filhos)data-sw-fxdata-sw-end / data-sw-scrubVariantes
Nenhum.
Eventos
sw:progressdetail.progress de 0 a 1 conforme avança pelos passosAPI (JavaScript)
Nenhum.
Requisitos
- Precisa do
gsap-bundle.js(GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro deswcore.js/swcore.css, sem arquivo extra do SWCore.
Limitações — o que ele não faz
- Precisa de pelo menos 2
data-sw-step— com menos que isso, o efeito não ativa e avisa no console. - Como todo efeito com pin, consome bastante altura de scroll da página — não é indicado pra seções curtas de conteúdo denso.
