Opcional / GSAP

Premium — Vitrine dos Recursos

Uma página só com os principais recursos de scroll do Premium já funcionando, lado a lado com o código real de cada um. Cada demo tem link pra página completa, com mais variações e parâmetros.

Mobile: abaixo de 768px os recursos com pin (Pin + Timeline, Vídeo Scrub) não travam mais o scroll — o conteúdo cai pro fluxo normal, empilhado. O comportamento pinado continua em telas maiores.

1. Parallax — sw-premium-parallax

Camadas com velocidades diferentes ao rolar. Role a página pra ver.

role a página

Ver a página completa de Scroll Avançado →

2. Pin + Timeline — sw-premium-timeline

A seção trava na tela enquanto a caixa segue os passos com o scroll. No mobile o pin é desativado — a caixa fica parada, sem travar a rolagem.

Ver a página completa de Scroll Avançado →

3. Vídeo Scrub — sw-premium-video-scrub

O tempo do vídeo é controlado pelo scroll. No mobile o pin é desativado — o vídeo continua avançando com o scroll, só não trava mais a tela.

● Scrub Ativo

Role para controlar o vídeo

↓ O scroll avança o tempo

Ver a página completa de Vídeo Scrub →

4. Transições de Seção — sw-premium-section

Uma tela só, fixa, cobrindo a janela inteira — role e ela passa por 8 efeitos diferentes, cada um com conteúdo real dentro pra mostrar o esquema do scroll: 4 simples (puro translate) e 4 compostos (zoom, fold, mask, skew).

Como funciona o esquema de scroll (por que não vira "2 scrolls"): não existe uma barra de rolagem escondida dentro da seção. É o scroll normal da página — o mesmo que você já está usando pra ler este texto. Quando ele chega nesta seção, o navegador trava a posição da tela (o "pin") e passa a converter cada pedacinho da sua rolagem em avanço entre as 8 páginas simuladas, uma de cada vez. Só depois que as 8 passam é que a página solta o pin e a rolagem volta ao normal. A distância reservada é automática: cada painel = 1 altura de tela de scroll (8 painéis aqui = 800% da altura da tela reservados só pra essa transição) — o motor calcula isso sozinho a partir de quantos filhos existem dentro do sw-premium-section, sem precisar configurar nada a mais. No celular (≤992px) esse pin nem entra em ação — os painéis ficam parados, um embaixo do outro, no fluxo normal da página.

Simples01
meusite.com/inicio

Início — slide-up

Entrou de baixo pra cima. Role pra ver a próxima página.

Começar
Simples02
meusite.com/sobre

Sobre nós — slide-left

Entrou deslizando vinda da direita.

Nossa história
Simples03
meusite.com/planos

Planos — slide-right

Entrou deslizando vinda da esquerda.

Ver planos
Simples04
meusite.com/blog

Blog — slide-down

Entrou vindo de cima, descendo.

Ler posts
Composto05
meusite.com/produtos

Produtos — zoom

Essa página entrou escalando do zero.

Ver catálogo
Composto06
meusite.com/equipe-tecnica

Equipe técnica — fold

Dobrou de cima pra baixo em 3D pra revelar.

Conhecer o time
Composto07
meusite.com/portfolio

Portfólio — mask

Revelação em círculo crescendo do centro.

Ver trabalhos
Composto08
meusite.com/parceiros

Parceiros — skew

Entrou com distorção angular. Última — fim do site.

Falar agora

Ver a página completa de Transições Premium →

5. Transições de Link — sw-premium-link

Clique em um card — ele navega via PJAX real, com a transição indicada.

Ver a página completa de Transições Premium →