Pin (prende na tela) Animações

O que é

É o efeito de "a página para por um instante": a pessoa rola, mas aquela seção fica parada no lugar por um trecho, e depois solta e a página segue. Serve para segurar a atenção numa mensagem importante ou para contar algo em etapas: com a seção parada, o título pode sair de lado, a foto crescer, um selo girar — tudo comandado pela rolagem.

Você marca a seção com sw-ani="pin". Ela prende quando o topo dela encosta no topo da tela (ou onde você mandar com sw-ani-start) e fica presa pelo tanto de rolagem de sw-ani-end — 100% é uma tela de rolagem, o padrão é 300% (três telas). Filhos com sw-ani="move" andam até os valores que você der (sw-ani-x, -y, -scale, -rot, -opacity) enquanto ela está presa; com a palavra scrub eles seguem a rolagem para frente e para trás. Precisa do pacote de animação.

Quando usar

• Mensagem principal que não pode passar batida (lançamento, promoção).
• "Como funciona" em etapas: seção parada enquanto as peças se mexem.
• Produto em destaque: a foto cresce enquanto a pessoa rola.
• Se você só quer que um título/menu acompanhe a rolagem sem parar a página, o certo é o Fixed.
• Para várias telas cheias trocando uma pela outra, o certo é o Sections.

Comece aqui

1. 1

   Coloque o SW Core e o pacote de animação. O JS da animação vai antes do swcore.min.js.

   <link rel="stylesheet" href="swcore/swcore.min.css">
   <link rel="stylesheet" href="swcore/swcore.motion.min.css">
   
   <!-- fim do <body> -->
   <script src="swcore/swcore.motion.min.js"></script>
   <script src="swcore/swcore.min.js"></script>

2. 2

   Marque a seção e diga por quanto tempo ela fica presa (100% = uma tela de rolagem). Os exemplos ao vivo estão logo abaixo — eles prendem de verdade enquanto você rola.

   <section sw-ani="pin" sw-ani-end="100%">
     <h2>Lançamento: o novo cardápio de verão</h2>
   </section>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<section sw-ani="pin scrub" sw-ani-end="150%" class="h-v flx f-cl j-ct alc gap-6 bg-g-drk t-ct p-xg">
  <p sw-ani="move" sw-ani-y="-40" sw-ani-opacity="0">Chegou o verão</p>
  <h2 sw-ani="move" sw-ani-scale="1.35">Cardápio novo</h2>
  <div class="flx gap-4">
    <span sw-ani="move" sw-ani-x="-120" sw-ani-rot="-12">Açaí</span>
    <span sw-ani="move" sw-ani-x="120" sw-ani-rot="12">Sorvetes</span>
  </div>
</section>

<div sw-ani="pin" sw-ani-start="top 30%" sw-ani-end="120%" class="bg-sur bd r-m p-xg flx f-cl gap-4 ov-hi">
  <div sw-ani="marquee scrub" sw-ani-speed="90"><span>PROMOÇÃO DE INVERNO · ATÉ 40% OFF ·&nbsp;</span></div>
  <div sw-ani="marquee scrub" sw-ani-dir="right" sw-ani-speed="160"><span>SÓ ATÉ DOMINGO · FRETE GRÁTIS ·&nbsp;</span></div>
</div>

<section sw-ani="pin" sw-ani-end="100%" id="etapas" class="h-v flx f-cl j-ct alc gap-4">
  <h2>Como funciona em 3 passos</h2>
  <p>1. Escolha · 2. Pague · 3. Receba em casa</p>
  <progress id="barra" max="1" value="0"></progress>
</section>

<script>
  // enquanto está presa, o pin avisa o progresso (0 = acabou de prender, 1 = vai soltar)
  document.getElementById('etapas').addEventListener('sw:progress', (e) => {
    document.getElementById('barra').value = e.detail.progress;
  });
</script>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.motion.min.css, e swcore.motion.min.js antes do swcore.min.js.

Cuidados — erros comuns

• A duração vem de sw-ani-end. sw-ani-dur não faz nada no pin.
• Os movers vão até o valor, a partir de onde estão: sw-ani-x="-800" faz a peça sair para a esquerda, não entrar. Para "entrar", posicione a peça fora no seu CSS e mande-a para 0.
• Sem a palavra scrub, os movers não acompanham a rolagem: fazem o movimento sozinhos, uma vez, quando a seção prende.
• Um elemento em volta com transform, filter ou overflow: hidden atrapalha: a seção pode "pular" ou ficar presa dentro dele em vez de na tela.
• Se você mudar a altura da página depois que ela carregou (conteúdo que chega por AJAX, acordeão aberto), chame SWMotion.refresh(), senão o pin prende no lugar errado.
• Mais de três telas presas cansa: quem tem pressa sente que "a página não anda", principalmente no celular.

O que ele não faz

• Quem ativou "reduzir movimento" no aparelho vê a seção presa, mas os movers ficam parados.