SWCore / Animações / Pin

Pin Animações

Prende uma seção na tela por uma distância extra de scroll, permitindo animar algo dentro dela enquanto ela não se move.

O que é

A base de qualquer narrativa "presa ao scroll": a seção para de se mover com o resto da página por um trecho — o suficiente pra um objeto girar, um texto trocar, uma barra encher — e só depois libera a rolagem normal de novo.

Como funciona

Pense numa revista: você segura uma folha parada na sua frente enquanto vira as páginas ao redor dela com a outra mão — a folha (a seção) não sai do lugar, o que muda é o que está desenhado nela. Por trás, cria um ScrollTrigger com pin:true a partir do topo da seção. Filhos marcados com data-sw="move" ganham uma animação própria (x/y/scale/rotação/opacidade) atrelada ao progresso desse pin — dá pra ter vários "movers" independentes dentro do mesmo pin.

Exemplos

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

A animação é a mesma. Escolha quanto scroll é necessário pra completá-la.

<div data-sw="pin" data-sw-end="300%" data-sw-scrub=".6">

Pin ativo Continue rolando · 0%

A seção permanece. O progresso avança.

<div data-sw="pin" data-sw-end="300%" data-sw-scrub=".6">
  <div data-sw="move" data-sw-x="78vw" data-sw-rot="180">SW</div>
</div>
<!-- data-sw-end controla quanto scroll a animação consome antes de liberar (testado aqui com 100%/300%/500%) -->

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

Pin ativo Continue rolando · 0%

data-sw-scale="2.2" data-sw-rot="90" no filho — cresce e gira sem sair do lugar.

<div data-sw="pin" data-sw-end="200%" data-sw-scrub=".6">
  <div data-sw="move" data-sw-scale="2.2" data-sw-rot="90">SW</div>
</div>

Atributos

data-sw="pin"

no elemento que vai ficar preso na tela

data-sw-end

distância de scroll consumida antes de liberar (padrão "300%" da altura da tela)

data-sw-end-at

distância responsiva por faixa de largura, formato "0-767:200%|768-*:400%"

data-sw-scrub

presente = movimento ligado 1:1 ao scroll; número = suaviza com esse atraso

data-sw="move" (nos filhos)

marca um elemento pra animar durante o pin

data-sw-x / data-sw-y / data-sw-scale / data-sw-rot / data-sw-opacity (nos filhos "move")

valor final de cada propriedade animada — só anima as que estiverem presentes

Variantes

Nenhum.

Eventos

sw:progress

disparado no elemento a cada atualização, com detail.progress de 0 a 1

API (JavaScript)

Nenhum.

Requisitos

Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso), como o resto da área de Animação. O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css. Como pina o scroll de verdade, evite colocar dentro de containers com overflow próprio.

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

Prender a tela é uma interrupção forte da leitura — usar com moderação, normalmente 1 por página, não em vários pontos seguidos.

← AnteriorCascade Próximo →Parallax