LAB 09 — Transitions

Transições Livres

Misture qualquer efeito de saída com qualquer efeito de entrada — em links de página e em seções de scroll. Um atributo, pipe no meio, liberdade total.

sm-link="out|in" sm-section="t1|t2|t3" fade · slide · scale · wipe · flip · blur
Page Transitions · sm-link

Transições de Página

O router PJAX intercepta cliques em a[sm-link] e anima a troca sem recarregar. Use um tipo único ou separe saída e entrada com pipe ( | ).

<!-- tipo único — saída e entrada iguais -->
<a href="page.html" sm-link="fade">Link</a>

<!-- pipe — saída DIFERENTE da entrada -->
<a href="page.html" sm-link="scale|fade">Link</a>
<a href="page.html" sm-link="wipe|slide-up">Link</a>
<a href="page.html" sm-link="flip|blur-in">Link</a>

Efeitos disponíveis

Saída  (out):  fade · slide · slide-left · slide-right · slide-up · slide-down
               scale · scale-up · scale-down
               flip · flip-x · blur · blur-out · wipe · curtain

Entrada (in):  fade · slide · slide-left · slide-right · slide-up · slide-down
               scale · scale-up · scale-down
               flip · flip-x · blur · blur-in · wipe · curtain

Entrada da página — sm-enter

Coloque no <body> ou no #smooll-view e a página anima ao carregar, sem nenhum clique.

<!-- anima ao abrir a página -->
<body sm-enter="fade">

<!-- ou direto no view -->
<main id="smooll-view" sm-enter="slide-up">

<!-- qualquer tipo disponível funciona -->
<body sm-enter="wipe">
<body sm-enter="scale">
<body sm-enter="blur">
<body sm-enter="flip">
🌫️

sm-enter="fade"

Opacidade sobe com leve deslize. Mais suave.

<body sm-enter="fade">
⬆️

sm-enter="slide-up"

Página sobe do rodapé na entrada.

<body sm-enter="slide-up">
🔭

sm-enter="scale"

Zoom in suave ao abrir.

<body sm-enter="scale">
🎬

sm-enter="wipe"

Cortina revela o conteúdo. Cinematográfico.

<body sm-enter="wipe">
🫧

sm-enter="blur"

Desfoque dissolve e revela o foco.

<body sm-enter="blur">
🃏

sm-enter="flip"

Rotação 3D no eixo Y na entrada.

<body sm-enter="flip">

Tipo único (out = in)

🌫️

fade

Opacidade + leve deslize vertical. Universal.

sm-link="fade"
⬅️

slide

Sai pela esquerda, entra pela direita.

sm-link="slide"
⬆️

slide-up

Sai pelo topo, nova sobe de baixo.

sm-link="slide-up"
🔭

scale

Zoom out na saída, zoom in na entrada.

sm-link="scale"
🎬

wipe

Cortina cobre e revela. Cinematográfico.

sm-link="wipe"
🃏

flip

Rotação 3D no eixo Y — virar carta.

sm-link="flip"
🫧

blur

Desfoque dissolve e resolve. Etéreo.

sm-link="blur"
📄

flip-x

Rotação 3D no eixo X — dobrar página.

sm-link="flip-x"

Combinações com pipe — saída ≠ entrada

Clique em qualquer card para navegar e ver o efeito combinado.

saída → scale-down

entrada → fade-up

sm-link="scale|fade"

saída → wipe (cortina)

entrada → slide-up

sm-link="wipe|slide-up"

saída → flip 3D

entrada → blur resolve

sm-link="flip|blur-in"

saída → slide-up

entrada → zoom-in

sm-link="slide-up|scale"

saída → blur dissolve

entrada → slide da esquerda

sm-link="blur-out|slide-right"

saída → zoom explode

entrada → flip eixo X

sm-link="scale-up|flip-x"

⚠️ Em file:// o browser bloqueia fetch — os links fazem navegação normal. Rode num servidor local para ver as transições.

Section Transitions · sm-section

Transições de Seção

Coloque sm-section no wrapper e os filhos viram seções animadas pelo scroll. Use pipe ( | ) para dar um efeito diferente a cada filho — o índice do valor mapeia pro filho de mesmo índice. O último valor repete se faltar.

<!-- todos os filhos com o mesmo efeito -->
<div sm-section="slide-up">
  <div>1</div><div>2</div><div>3</div>
</div>

<!-- pipe — cada filho com seu próprio efeito de entrada -->
<div sm-section="slide-up|zoom|fold">
  <div>1 — base</div>
  <div>2 — entra com zoom</div>
  <div>3 — entra com fold</div>
</div>

<!-- repete o último se tiver mais filhos que valores -->
<div sm-section="slide-up|skew">
  <div>1</div>
  <div>2 — skew</div>
  <div>3 — skew (repete)</div>
  <div>4 — skew (repete)</div>
</div>

Efeitos disponíveis

slide · slide-up · slide-down · slide-left · slide-right
mask  · zoom · skew · fold
stack         → empilhamento sticky (modo próprio, sem pipe)
h-scroll      → carrossel horizontal →
h-scroll-right → carrossel horizontal ←
sm-section="stack"

stack

Seções empilhadas com sticky — cada nova sobe por cima da anterior. Modo próprio, não usa pipe.

<div sm-section="stack">
  <div>1</div><div>2</div><div>3</div>
</div>

Stack · 01

Role ↓

01

Stack · 02

Veio por cima

02

Stack · 03

Cobre tudo

03
sm-section="slide-up"

todos iguais (sem pipe)

Sem pipe — todos os filhos usam o mesmo efeito.

<div sm-section="slide-up">
  <div>1</div><div>2</div><div>3</div>
</div>

01

Base

01

02

slide-up

02

03

slide-up

03
sm-section="slide-up|zoom|fold"

pipe — cada filho diferente

Três valores, três transições. Simples assim.

<div sm-section="slide-up|zoom|fold">
  <div>1 — base</div>
  <div>2 — zoom</div>
  <div>3 — fold</div>
</div>

Base · 01

Seção inicial

01

Zoom · 02

Escalou do zero

02

Fold · 03

Dobrou do topo

03
sm-section="slide-left|skew|mask|slide-down"

pipe com 4 efeitos

Misture à vontade — cada posição do pipe mapeia pro filho de mesmo índice.

<div sm-section="slide-left|skew|mask|slide-down">
  <div>1</div><div>2 skew</div><div>3 mask</div><div>4 slide-down</div>
</div>

slide-left · 01

Base

01

skew · 02

Entrou com ângulo

02

mask · 03

Revelação em círculo

03

slide-down · 04

Desceu do topo

04
sm-section="slide-up|skew"

pipe com repetição do último

Menos valores que filhos? O último repete automaticamente.

<div sm-section="slide-up|skew">
  <div>1</div>
  <div>2 — skew</div>
  <div>3 — skew (repete)</div>
  <div>4 — skew (repete)</div>
</div>

01

Base

01

02

skew

02

03

skew (repete)

03

04

skew (repete)

04
slide-right|slide-left|slide-down|slide-up

quatro direções de slide

Combine direções para criar uma narrativa de movimento.

<div sm-section="slide-right|slide-left|slide-down|slide-up">...</div>

01

Base

01

02

slide-left

02

03

slide-down

03

04

slide-up

04
sm-section="zoom"

zoom

Seção surge escalando do zero com fade de opacidade.

<div sm-section="zoom">...</div>

01

Base

01

02

scale(0) → scale(1)

02
sm-section="mask"

mask (iris)

Reveal em círculo crescente a partir do centro.

<div sm-section="mask">...</div>

01

Base

01

02

clipPath circle

02
sm-section="skew"

skew

Entra pela direita com distorção angular.

<div sm-section="skew">...</div>

01

Base

01

02

xPercent + skewX → 0

02
sm-section="fold"

fold

Dobra de cima pra baixo — rotationX 3D.

<div sm-section="fold">...</div>

01

Base

01

02

rotationX(-90) → 0

02
sm-section="h-scroll"

h-scroll — carrossel horizontal

Seções lado a lado que deslizam para a esquerda conforme você rola.

<div sm-section="h-scroll">
  <div>01</div><div>02</div><div>03</div><div>04</div>
</div>

Cena 01

Role ↓

01

Cena 02

Deslizou

02

Cena 03

Continua

03

Cena 04

Fim

04
sm-section="h-scroll-right"

h-scroll-right — carrossel reverso

Começa na última cena e desliza para a direita.

<div sm-section="h-scroll-right">...</div>

01

Aparece por último

01

02

→

02

03

→

03

04

Começa aqui

04