Transição de página Animações

O que é

Cobre a navegação real (não é uma SPA/PJAX) com um efeito visual — a página atual "sai" com uma animação, o navegador troca de verdade pra próxima URL, e ela "entra" com a animação combinada.

Como funciona

Ao clicar num link com data-sw-page (mesma origem, sem target/download, sem modificadores de teclado), o clique é interceptado: uma camada de overlay cobre a tela com o efeito de saída, a navegação real acontece por baixo, e a URL de destino já "sabe" (via sessionStorage) que precisa tocar o efeito de entrada assim que carregar.

Exemplos

<!-- 
  Quando o link aponta para "#" ou botão, o SWCore toca a simulação 
  completa (cobertura + revelação) sem sair da página atual!
-->
<button type="button" sw-btn class="sw-btn-pri" data-sw-page="wipe">Wipe (Cortina Vertical)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="curtain">Curtain (Cortina Central)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="fade">Fade (Dissolver)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="slide">Slide (Deslizar Esquerda)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="slide-right">Slide Right (Direita)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="slide-up">Slide Up (De Baixo)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="slide-down">Slide Down (De Cima)</button>

<button type="button" sw-btn class="sw-btn-out" data-sw-page="scale">scale</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="scale-down">scale-down</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="flip">flip (Giro 3D Y)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="flip-x">flip-x (Giro 3D X)</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="blur">blur (Desfoque de Vidro)</button>

<!-- Um efeito para cobrir a página atual, e outro efeito diferente ao abrir a próxima -->
<button type="button" sw-btn class="sw-btn-out" data-sw-page="fade|slide-up">Sai com Fade, entra com Slide Up</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="slide-left|slide-right">Slide Esquerda | Slide Direita</button>
<button type="button" sw-btn class="sw-btn-out" data-sw-page="curtain|wipe">Curtain | Wipe</button>

<!-- Link com URL real: cobre a tela, carrega a próxima página e a revela suavemente -->
<a href="motion-reveal.html" data-sw-page="curtain" class="sw-btn sw-btn-pri">Ir para Reveal (Curtain) →</a>
<a href="../index.html" data-sw-page="wipe" class="sw-btn sw-btn-out">Voltar para Home (Wipe) →</a>

<!-- Em qualquer lugar da página, uma vez só: -->
<template id="sw-page-loader">
  <img src="logo.png" alt="Sua marca">
</template>

<style>
  /* Opcional: cor da cortina em TODOS os efeitos, sem editar cada um */
  :root { --sw-page-bg: #6d28d9; }
</style>

<a href="proxima-pagina.html" data-sw-page="wipe">Ir</a>
<!-- Sem template, cai no "Carregando" padrão. O logo só some quando a
     próxima página demora perceptivelmente pra carregar. -->

Atributos

Variantes

Eventos

Nenhum.

API (JavaScript)

Requisitos

• Precisa do gsap-bundle.js (GSAP com ScrollTrigger já incluso) e do swcore.js/swcore.css normais, carregados em todas as páginas do site (origem e destino). Sem isso, a página de destino não sabe tocar o efeito de entrada.

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

• Não é um roteador SPA / Single Page Application — cada clique realiza uma navegação HTML real do navegador, enquanto o efeito cobre e revela a transição sem "piscada" em branco.
• Apenas links de mesma origem (same-origin) disparam o efeito; links para sites externos ou links com target="_blank" navegam diretamente sem transição.
• Em conexões muito lentas, o indicador "Carregando" pulsa discretamente no centro da cortina enquanto a próxima página é baixada via preload em segundo plano.