SWCore / Animações / Reveal

Reveal Animações

Revela um elemento (fade, slide, zoom, flip ou clip-path) na primeira vez que ele entra na área visível ao rolar a página.

O que é

O efeito de entrada mais comum de qualquer site com scroll: o elemento começa "escondido" e some suavemente pra dentro assim que alcança a área de leitura. Cobre 17 variações prontas — fade, slide, zoom, rotação, flip 3D e revelação por máscara (clip-path).

Como funciona

Todo elemento com data-sw="nome-do-efeito" é observado pelo ScrollTrigger. Ao entrar na tela, o GSAP anima do estado inicial do efeito até o estado normal do elemento. Se data-sw-once não estiver presente, o efeito desfaz e refaz sempre que o elemento sai e volta a entrar na tela (útil pra provar em demo, incomum em produção). Respeita prefers-reduced-motion automaticamente — some sem animação pra quem pediu menos movimento no sistema.

Quando ele anima

O Reveal pode disparar de 3 jeitos — a diferença é como ele reage ao scroll. Role os dois primeiros cartões pra fora da tela e volte a subir, e role bem devagar por dentro do terceiro, pra ver a diferença de verdade, ao vivo.

Sempre que o scroll passa (padrão)

Sem nenhum atributo extra, o elemento reanima toda vez que sai da tela e volta a entrar. Bom pra chamar atenção numa demonstração; incômodo em texto de leitura normal, que fica piscando toda hora.

<div data-sw="fade-up">Conteúdo</div>
fade-upRole pra baixo até esse bloco sumir da tela e volte a subir — ele reanima sozinho.
Só a primeira vez

Com data-sw-once, ele anima uma única vez, na primeira vez que aparece na tela. Depois disso fica parado, mesmo saindo e voltando — é o modo certo pra conteúdo de leitura normal em produção.

<div data-sw="fade-up" data-sw-once>Conteúdo</div>
fade-up + data-sw-onceRole pra baixo e volte — esse aqui não reanima de novo.
Acompanhando o scroll (scrub)

Com data-sw-scrub, o Reveal deixa de disparar com duração fixa e passa a seguir a régua do scroll de verdade: anda pra frente enquanto você desce, anda pra trás se você subir. data-sw-dur e data-sw-once deixam de fazer sentido — o movimento inteiro é a posição do scroll.

<div data-sw="fade-up" data-sw-scrub>Conteúdo</div>
fade-up + data-sw-scrubRole bem devagar por cima deste bloco — ele anda junto com o scroll, não de uma vez.

Exemplos

Fade — nas 4 direções Ao vivo
fade-up Sobe um pouco enquanto vai aparecendo
fade-down Desce um pouco enquanto vai aparecendo
fade-left Aparece chegando da direita
fade-right Aparece chegando da esquerda 
<div class="demo-grid">
  <div class="demo-box" data-sw="fade-up">
    <span class="demo-box-title">fade-up</span>
    <span class="demo-box-sub">Sobe um pouco enquanto vai aparecendo</span>
  </div>
  <div class="demo-box" data-sw="fade-down">
    <span class="demo-box-title">fade-down</span>
    <span class="demo-box-sub">Desce um pouco enquanto vai aparecendo</span>
  </div>
  <div class="demo-box" data-sw="fade-left">
    <span class="demo-box-title">fade-left</span>
    <span class="demo-box-sub">Aparece chegando da direita</span>
  </div>
  <div class="demo-box" data-sw="fade-right">
    <span class="demo-box-title">fade-right</span>
    <span class="demo-box-sub">Aparece chegando da esquerda</span>
  </div>
</div>
<div class="demo-row demo-replay">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pil sw-btn-sm" data-demo-replay>
    <i class="swi-refresh"></i> Tocar de novo
  </button>
</div>
Slide — nas 4 direções Ao vivo
slide-up Sobe de bem mais longe, sem ficar transparente no caminho
slide-down Desce de bem mais longe, sem ficar transparente
slide-left Desliza vindo da direita, já visível o tempo todo
slide-right Desliza vindo da esquerda, já visível o tempo todo 
<div class="demo-grid">
  <div class="demo-box" data-sw="slide-up">
    <span class="demo-box-title">slide-up</span>
    <span class="demo-box-sub">Sobe de bem mais longe, sem ficar transparente no caminho</span>
  </div>
  <div class="demo-box" data-sw="slide-down">
    <span class="demo-box-title">slide-down</span>
    <span class="demo-box-sub">Desce de bem mais longe, sem ficar transparente</span>
  </div>
  <div class="demo-box" data-sw="slide-left">
    <span class="demo-box-title">slide-left</span>
    <span class="demo-box-sub">Desliza vindo da direita, já visível o tempo todo</span>
  </div>
  <div class="demo-box" data-sw="slide-right">
    <span class="demo-box-title">slide-right</span>
    <span class="demo-box-sub">Desliza vindo da esquerda, já visível o tempo todo</span>
  </div>
</div>
<div class="demo-row demo-replay">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pil sw-btn-sm" data-demo-replay>
    <i class="swi-refresh"></i> Tocar de novo
  </button>
</div>
Zoom e giro leve Ao vivo
zoom-in Começa pequeno e cresce até o tamanho normal
zoom-out Começa grande e encolhe até o tamanho normal
rotate-in Gira um pouquinho enquanto cresce, como se estivesse se ajeitando 
<div class="demo-grid">
  <div class="demo-box" data-sw="zoom-in">
    <span class="demo-box-title">zoom-in</span>
    <span class="demo-box-sub">Começa pequeno e cresce até o tamanho normal</span>
  </div>
  <div class="demo-box" data-sw="zoom-out">
    <span class="demo-box-title">zoom-out</span>
    <span class="demo-box-sub">Começa grande e encolhe até o tamanho normal</span>
  </div>
  <div class="demo-box" data-sw="rotate-in">
    <span class="demo-box-title">rotate-in</span>
    <span class="demo-box-sub">Gira um pouquinho enquanto cresce, como se estivesse se ajeitando</span>
  </div>
</div>
<div class="demo-row demo-replay">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pil sw-btn-sm" data-demo-replay>
    <i class="swi-refresh"></i> Tocar de novo
  </button>
</div>
Virada em 3D (Flip) Ao vivo
flip-x Vira de cima pra baixo, como uma carta sendo virada
flip-y Vira da esquerda pra direita, como uma carta sendo virada 
<div class="demo-grid">
  <div class="demo-box" data-sw="flip-x">
    <span class="demo-box-title">flip-x</span>
    <span class="demo-box-sub">Vira de cima pra baixo, como uma carta sendo virada</span>
  </div>
  <div class="demo-box" data-sw="flip-y">
    <span class="demo-box-title">flip-y</span>
    <span class="demo-box-sub">Vira da esquerda pra direita, como uma carta sendo virada</span>
  </div>
</div>
<div class="demo-row demo-replay">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pil sw-btn-sm" data-demo-replay>
    <i class="swi-refresh"></i> Tocar de novo
  </button>
</div>
Cortina abrindo sobre uma foto (Reveal por máscara) Ao vivo
Poltrona Âmbar reveal-left — abre da esquerda pra direita
Arquitetura reveal-right — abre da direita pra esquerda
Deserto Cromado reveal-up — abre de baixo pra cima
Tecido Cromo reveal-center — abre do centro pra fora 
<div class="demo-grid">
  <div class="demo-media" data-sw="reveal-left" data-sw-dur="1.1">
    <img src="../../assets/images/image-reveal/amber-chair.webp" alt="Poltrona Âmbar">
    <span class="demo-media-cap">reveal-left — abre da esquerda pra direita</span>
  </div>
  <div class="demo-media" data-sw="reveal-right" data-sw-dur="1.1">
    <img src="../../assets/images/image-reveal/architecture.webp" alt="Arquitetura">
    <span class="demo-media-cap">reveal-right — abre da direita pra esquerda</span>
  </div>
  <div class="demo-media" data-sw="reveal-up" data-sw-dur="1.1">
    <img src="../../assets/images/image-reveal/chrome-desert.webp" alt="Deserto Cromado">
    <span class="demo-media-cap">reveal-up — abre de baixo pra cima</span>
  </div>
  <div class="demo-media" data-sw="reveal-center" data-sw-dur="1.1">
    <img src="../../assets/images/image-reveal/fabric-chrome.webp" alt="Tecido Cromo">
    <span class="demo-media-cap">reveal-center — abre do centro pra fora</span>
  </div>
</div>
<div class="demo-row demo-replay">
  <button type="button" class="sw-btn sw-btn-out sw-btn-pil sw-btn-sm" data-demo-replay>
    <i class="swi-refresh"></i> Tocar de novo
  </button>
</div>

Atributos

data-sw="efeito"
nome do efeito — ver lista completa em Variantes
data-sw-dur
duração em segundos (padrão 0.8, entre 0.1 e 10) — ignorado quando data-sw-scrub está presente
data-sw-delay
atraso antes de começar, em segundos (padrão 0)
data-sw-ease
"soft" (padrão), "smooth", "snap" ou "linear"
data-sw-start
"early" (entra cedo), "normal" (padrão) ou "late" (entra tarde)
data-sw-once
presente = anima só na primeira vez; ausente = anima toda vez que entra/sai da tela
data-sw-scrub
presente = acompanha a régua do scroll em vez de disparar uma vez; aceita um número (segundos de atraso suave) ou fica vazio pra 1:1 direto com o scroll
data-sw-end
só com data-sw-scrub: onde o movimento termina (padrão bottom center)
data-sw-force
ignora o prefers-reduced-motion do visitante — usar com cuidado, é uma exceção de acessibilidade

Variantes

fade-up / fade-down / fade-left / fade-right
aparece com opacidade + um leve deslocamento na direção indicada
slide-up / slide-down / slide-left / slide-right
como o fade, mas com deslocamento maior (96px) e sem mudar opacidade
zoom-in / zoom-out
aparece crescendo (de 82%) ou encolhendo (de 118%) até o tamanho normal
rotate-in
aparece rotacionando levemente (-10°) e crescendo de 90%
flip-x / flip-y
aparece com um giro 3D no eixo horizontal ou vertical
reveal-left / reveal-right / reveal-up / reveal-center
revela por máscara (clip-path), como uma cortina abrindo

Eventos

Nenhum.

API (JavaScript)

SWMotion.play(elemento)
dispara manualmente o efeito de data-sw do elemento, sem esperar o scroll (ex.: num clique)

Requisitos

  • O JS e o CSS do Motion já vêm dentro de dist/swcore.js/swcore.css normais, sem nenhum arquivo a mais do SWCore. Só falta o gsap-bundle.js (que já traz GSAP e ScrollTrigger juntos) em algum <script> da página. A ordem entre ele e o swcore.js não importa: o Motion só tenta usar o GSAP depois que a página termina de carregar. Ver Instalação da área de Animação.

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

  • Não tem efeito de "typewriter" ou de texto letra-por-letra — isso é a página de Texto, com Split/Scramble/Typewriter/Shuffle.
← AnteriorSWIcons Próximo →Cascade