A seção fica GRUDADA na tela enquanto você rola um trecho — clássico efeito de storytelling.
O que é
Prende o elemento fixo no viewport enquanto o usuário rola por uma distância de scroll extra, soltando depois — bom pra segurar atenção num bloco importante ou animar o conteúdo interno enquanto a seção não sai do lugar.
Como funciona
Usa GSAP ScrollTrigger com pin:true — a seção some do fluxo normal e vira position:fixed pelo tempo que o scroll "extra" durar.
Exemplos
O que o Pin faz Ao vivo
A seção trava na tela e o visitante continua rolando: a página avança, mas a seção fica. Quando o trecho definido em sw-ani-dur acaba, ela solta e a página segue normal.
Precisa de uma tela inteira e de espaço real de rolagem pra acontecer — por isso não cabe nesta caixinha de exemplo.
<div sw-ani="pin" sw-ani-dur="1">
fica preso na tela enquanto você rola um trecho
</div>
<!-- dur é medido em TELAS de rolagem: 1 = uma tela, 3 = três telas -->
Animando algo enquanto a seção está travada Ao vivo
É aqui que o Pin fica útil de verdade: com a seção parada, você move peças dentro dela conforme o scroll avança. O texto entra pela esquerda, a foto cresce, o gráfico se revela — tudo amarrado ao mesmo gesto de rolar.
<div sw-ani="pin" sw-ani-dur="2">
<h2>Como funciona</h2>
<!-- estes filhos se movem enquanto a seção está travada -->
<div sw-ani="move" sw-ani-x="-800">entra pela esquerda</div>
<div sw-ani="move" sw-ani-scale="1.4">cresce</div>
<div sw-ani="move" sw-ani-opacity="1">aparece</div>
</div>
<!-- movimentos disponíveis no filho:
sw-ani-x · sw-ani-y · sw-ani-scale · sw-ani-rot · sw-ani-opacity -->
Quanto tempo segurar Ao vivo
dur="1" é o mais seguro: uma tela de rolagem, o visitante mal percebe que foi segurado.
Acima de 3 telas o efeito começa a irritar — quem está com pressa sente que a página "não anda". Use trechos longos só quando houver de fato uma sequência pra contar.
<div sw-ani="pin" sw-ani-dur="1">segurada curta</div>
<div sw-ani="pin" sw-ani-dur="3">sequência longa — use com critério</div>
Atributos
sw-ani-dur
quanto scroll (em telas) o elemento fica preso antes de soltar
sw-ani-start
onde o pin começa (ex.: "top top")
sw-ani-end
onde o pin termina
Variantes
sw-ani-dur="1"
fica preso por uma tela de rolagem
sw-ani-dur="3"
fica preso por três telas — dá tempo de contar uma história
sw-ani="move" (num filho)
move um elemento DENTRO da seção presa, preso ao mesmo scroll
sw-ani-x · -y · -scale · -rot · -opacity
o que esse filho faz enquanto a seção está travada
Eventos
Nenhum.
API (JavaScript)
Nenhum.
Requisitos
Precisa do pacote swcore.motion.min.css/js.
Limitações — o que ele não faz
Um ancestral com overflow:hidden ou contain quebra o pin — é a mesma regra que atrapalha o position:sticky.
Se você só quer que algo "acompanhe" sem travar a página, o componente certo é o Fixed, que é CSS puro e mais leve.
Segurar a rolagem é um gesto forte: no celular, onde a tela é pequena e o dedo é o controle, trechos longos incomodam mais.
