Sections no SWCore — documentação e exemplos

O que é

Pra páginas com poucas seções grandes e muito visuais (apresentações, cases, produtos únicos) — cada seção ocupa a tela toda e a transição pra próxima é uma animação inteira (cobrir, deslizar, dissolver, girar, dobrar), não um scroll comum.

Como funciona

Detecta seções filhas (data-sw-section) e monta uma timeline única presa à tela, cobrindo seções × 100% de distância. data-sw-fx escolhe o efeito de transição entre cada par de seções (pode listar um efeito por seção separado por |). Em telas pequenas, cai automaticamente pro fluxo normal (empilhado, sem prender scroll) se data-sw-mobile="flow" estiver presente.

Exemplos

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

01

Base

A primeira cena já está no palco.

Ela não sai — só fica coberta quando a próxima chega.

02

stack

A segunda sobe e permanece por cima.

Ao voltar o scroll, ela desce novamente — reversível.

03

stack

A terceira cobre a segunda.

Mesmo efeito de novo — todas as cenas empilham na mesma pilha.

<div data-sw="sections" data-sw-fx="stack">
  <section data-sw-section>Cena 01</section>
  <section data-sw-section>Cena 02</section>
  <section data-sw-section>Cena 03</section>
</div>
<!-- um valor só = todas as transições reais usam esse mesmo efeito -->

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

01

Base

Cada posição do pipe é uma cena.

A primeira nunca anima — ela já começa visível.

02

zoom

Cresce do centro.

O 2º nome do pipe (não o 1º) controla essa entrada.

03

fold

Desdobra verticalmente.

Se faltarem nomes no pipe, o último se repete.

<div data-sw="sections" data-sw-fx="slide-up|zoom|fold">
  <section data-sw-section>Começo</section>
  <section data-sw-section>Aproxima</section>
  <section data-sw-section>Desdobra</section>
</div>
<!-- separe os nomes com | — cada posição corresponde a uma section (a 1ª nunca anima, é a base) -->

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

01

Direções

Observe de onde cada cena nova aparece.

Direção conta história: continuidade, oposição, subida ou queda.

02

slide-right

Entra pela direita →

A anterior sai pela esquerda.

03

slide-left

Entra pela esquerda ←

Sentido invertido do anterior.

04

slide-down

Desce ↓

Entra de cima pra baixo.

05

slide-up

Sobe ↑

Entra de baixo pra cima.

<div data-sw="sections" data-sw-fx="stack|slide-right|slide-left|slide-down|slide-up">
  <section data-sw-section>Cena base</section>
  <section data-sw-section>Direita</section>
  <section data-sw-section>Esquerda</section>
  <section data-sw-section>Desce</section>
  <section data-sw-section>Sobe</section>
</div>

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

01

Observe

Esta cena serve de fundo pra você enxergar cada efeito.

Role bem devagar entre elas.

02

fade

Aparece pela opacidade.

De 0 a 1 aos poucos — ao subir o scroll, fica transparente de novo.

03

mask

Abre uma íris circular.

Um clip-path circular cresce do centro até cobrir a tela.

04

skew

Revela com borda inclinada.

Como uma cortina em diagonal, sem deformar o texto.

05

fold

Desdobra verticalmente do topo.

Efeito de dobra, como um mapa se abrindo.

<div data-sw="sections" data-sw-fx="stack|fade|mask|skew|fold">
  <section data-sw-section>Cena base</section>
  <section data-sw-section>Aparecer com fade</section>
  <section data-sw-section>Revelar com mask</section>
  <section data-sw-section>Inclinar com skew</section>
  <section data-sw-section>Dobrar com fold</section>
</div>

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

01

Trilho

Rolagem vertical vira deslocamento horizontal.

Todas as seções ficam lado a lado, deslizando juntas.

02

Trilho

Sem empilhar — desliza pro lado.

Cada seção some pra esquerda conforme a próxima chega.

03

Trilho

E termina no fim do trilho.

Depois da última seção, o scroll libera de novo.

<div data-sw="sections" data-sw-fx="h-scroll">
  <section data-sw-section>Seção 1</section>
  <section data-sw-section>Seção 2</section>
  <section data-sw-section>Seção 3</section>
</div>

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

01

zoom

Cresce até cobrir a tela.

No celular, esse efeito nem entra — some empilhado, scroll normal.

02

zoom

A anterior encolhe ao sair.

data-sw-mobile="flow" evita prender o scroll em telas pequenas.

<div data-sw="sections" data-sw-fx="zoom" data-sw-mobile="flow">
  <section data-sw-section>Seção 1</section>
  <section data-sw-section>Seção 2</section>
</div>
<!-- data-sw-mobile="flow" some até 767px de largura: some empilhado, scroll normal -->

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

01

Abertura

Section 1: Tela Inicial

Ao rolar, a Section 2 entra cobrindo esta tela.

1

Conteúdo Longo na Section 2

A tela fica presa nesta section enquanto todo o conteúdo sobe pelo scroll do mouse.

2

Fundo Fixo sem cortar nada

A imagem de fundo não se mexe; apenas este fluxo de cartões desliza para cima.

3

Liberação automática

Ao atingir o final deste bloco, a Section 3 entrará imediatamente!

03

Conclusão

Section 3: Próxima Tela

A página continuou seu fluxo normal após a passagem do conteúdo grande.

<div data-sw="sections" data-sw-fx="cover">
  <!-- Section 1 Normal -->
  <section data-sw-section class="h-screen flex items-center justify-center">
    <h2>Section 1: Abertura</h2>
  </section>

  <!-- Section 2: Conteúdo Longo (data-sw-scroll + data-sw-h="300%") -->
  <section data-sw-section data-sw-h="300%" class="relative h-screen overflow-hidden">
    <!-- Imagem de fundo que fica presa -->
    <div class="absolute inset-0 z-0">
      <img src="fundo.webp" class="w-full h-full object-cover" alt="Fundo">
    </div>

    <!-- Container com todo o conteúdo longo que sobe pelo scroll -->
    <div data-sw-scroll class="relative z-10 max-w-2xl mx-auto py-16 px-6 space-y-8 text-white">
      <div class="p-6 rounded-lg bg-black/60 backdrop-blur">
        <h3>1. Começo do conteúdo</h3>
        <p>A tela fica travada na Section 2 enquanto você rola o mouse.</p>
      </div>
      <div class="p-6 rounded-lg bg-black/60 backdrop-blur">
        <h3>2. Meio do conteúdo</h3>
        <p>Todo o texto longo passa suavemente sem cortar.</p>
      </div>
      <div class="p-6 rounded-lg bg-black/60 backdrop-blur">
        <h3>3. Fim do conteúdo</h3>
        <p>Ao terminar o último bloco, o scroll avança para a Section 3!</p>
      </div>
    </div>
  </section>

  <!-- Section 3 Normal: Continuação -->
  <section data-sw-section class="h-screen flex items-center justify-center">
    <h2>Section 3: A Jornada Continua</h2>
  </section>
</div>

Atributos

data-sw="sections"

no container das seções

data-sw-section (nos filhos)

cada seção da sequência — precisa de pelo menos 2

data-sw-fx

efeito(s) de transição, separados por | se quiser um diferente por seção

data-sw-mobile="flow"

em telas até 767px, ignora o efeito e deixa rolar normal (empilhado)

data-sw-scrub

como nos outros efeitos de scroll presa

Variantes

stack / cover

a seção nova cobre a anterior, sem sair

slide-up / slide-down / slide-left / slide-right

a seção nova entra deslizando, a anterior sai pro lado oposto

fade

dissolve de uma seção pra outra

zoom / scale

a seção nova cresce até cobrir; a anterior encolhe ou aumenta ao sair

mask

revela em círculo crescente (clip-path circular)

skew

entra em diagonal, como uma cortina inclinada

fold

efeito de dobra vertical, como desenrolar de cima pra baixo

h-scroll / h-scroll-right

em vez de empilhar, desliza todas as seções na horizontal (esquerda→direita ou o inverso)

Eventos

Nenhum.

API (JavaScript)

Nenhum.

Requisitos

Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso). O JS e o CSS do Motion já vêm dentro de swcore.js/swcore.css, sem arquivo extra do SWCore.

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

Precisa de pelo menos 2 data-sw-section.
É o efeito mais pesado da área de Animação (monta uma timeline única com várias sub-animações) — pensado pra 1 uso por página, não pra repetir várias vezes.

Sections Animações

O que é

Como funciona

Exemplos

A primeira cena já está no palco.

A segunda sobe e permanece por cima.

A terceira cobre a segunda.

Cada posição do pipe é uma cena.

Cresce do centro.

Desdobra verticalmente.

Observe de onde cada cena nova aparece.

Entra pela direita →

Entra pela esquerda ←

Desce ↓

Sobe ↑

Esta cena serve de fundo pra você enxergar cada efeito.

Aparece pela opacidade.

Abre uma íris circular.

Revela com borda inclinada.

Desdobra verticalmente do topo.

Rolagem vertical vira deslocamento horizontal.

Sem empilhar — desliza pro lado.

E termina no fim do trilho.

Cresce até cobrir a tela.

A anterior encolhe ao sair.

Section 1: Tela Inicial

Conteúdo Longo na Section 2

Fundo Fixo sem cortar nada

Liberação automática

Section 3: Próxima Tela

Atributos

Variantes

Eventos

API (JavaScript)

Requisitos

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