Gruda contra o scroll da página até o trecho acabar — position:sticky puro, sem GSAP.
O que é
Mais leve que o Pin — usa só position:sticky nativo do CSS, sem depender do motor GSAP. Bom pra cabeçalho de seção que acompanha enquanto o conteúdo ao lado rola.
Como funciona
100% CSS (position:sticky) — funciona mesmo se o pacote de Animação (GSAP) não estiver carregado. Por isso é a escolha certa quando você só quer "acompanhar a rolagem", sem precisar animar nada preso ao scroll.
Exemplos
Cabeçalho que acompanha — role a caixa Ao vivo
Eu fico grudado aqui em cima
Role esta caixa. O cabeçalho acima permanece visível enquanto este conteúdo passa por baixo. Linha Linha Linha Linha Linha Linha Linha Linha Linha Linha Fim do bloco.
<div style="overflow:auto; height:60rem">
<div sw-ani="fixed">cabeçalho que acompanha</div>
<div>…conteúdo longo…</div>
</div>
<!-- é position:sticky por baixo: não precisa do GSAP -->
Coluna lateral que acompanha o texto Ao vivo
Resumo
Esta coluna acompanha a leitura do texto ao lado.
Role a caixa e repare que o resumo à esquerda fica visível.
Fixed (este): o elemento acompanha enquanto o bloco pai passa, e some quando o bloco acaba. É CSS puro, leve, e funciona sem o pacote de animação.
Pin: a seção trava a página por um trecho de rolagem — você continua rolando e ela não sai, enquanto algo acontece dentro dela. Precisa do GSAP.
Regra prática: se você só quer que algo "não suma da vista", é Fixed. Se você quer segurar o visitante num ponto pra contar uma história, é Pin.
<!-- acompanha, sem travar a página -->
<div sw-ani="fixed">…</div>
<!-- trava a página por um trecho de scroll -->
<div sw-ani="pin" sw-ani-dur="1">…</div>
Atributos
Nenhum.
Variantes
(sem opções)
gruda no topo enquanto o bloco pai estiver passando
Eventos
Nenhum.
API (JavaScript)
Nenhum.
Requisitos
Nenhuma.
Limitações — o que ele não faz
Como é position:sticky, ele para de funcionar se algum elemento pai tiver overflow:hidden — é regra do CSS, não do framework. Se "não gruda", procure o overflow escondido no pai.
Ele acompanha só dentro do bloco pai: quando esse bloco termina, o elemento vai embora junto.
