GSAP page transitions that make a site feel crafted

Page transitions have a bad reputation, and they have earned it. Most of the time they feel like an unskippable video game cutscene: you click a link, the screen goes dead for a split second, an arbitrary loader spins, and a wipe animates across the viewport before you can read a single word.

The issue is rarely the raw length of an animation. It is perceived latency. What ruins a page transition is dead time: waiting for the network before anything moves, or freezing the user out while waiting for an animation that started after the content had already arrived.

Done right, a page transition makes a multi-page site feel like one cohesive, responsive space. Here is how to pick the right pattern for your brand, wire it to feel instantaneous, and handle the real browser plumbing that keeps it from breaking.

What counts as a page transition

A page transition coordinates the visual handoff from one URL to another. On a multi-page site, that means intercepting same-site link clicks, fetching the next document in the background, swapping the main content, and running exit and entry animations. In a single-page app, it coordinates route changes.

That is distinct from a preloader, which runs once on initial site entry, and from scroll-driven scene changes, which animate content within a single document. Both share similar animation principles, but a page transition is triggered by a deliberate navigational click.

Seven page transition patterns, and where they belong

1. The origin-led reveal

A shape expands directly from the coordinates of the click or tap, blankets the screen, and then opens outward onto the incoming page’s focal point. Because the motion originates where the visitor’s hand touched the screen, it feels like an immediate physical reaction to their intent rather than an arbitrary overlay.

The Physiotherapy Clinic template demonstrates this: internal links trigger a disc expanding from the pointer position, hold briefly on the destination title, and then iris open onto the incoming page’s main hero or treatment graphic. Navigating Back reverses the timeline, collapsing the aperture back to where the visitor started.

Live demo Open in new tab ↗

This fits tactile services, treatment bookings, or brands with a dominant colour to wash across the screen. The technical detail to watch: keyboard users have no pointer coordinates, so fall back to measuring document.activeElement.getBoundingClientRect() so the shape expands cleanly from the focused link instead of defaulting to (0, 0).

2. The physical page

Treating the screen like a tangible object: tearing along a perforated line, folding like a map, or turning like a catalogue leaf.

The Tear-Off Page Transition rips the current page along a top edge, lets it swing on its corner, and drops it away to expose the next page beneath; hitting Back re-affixes the sheet. On slower connections, the sheet sways gently on its hinge while awaiting the network response instead of freezing mid-air.

Live demo Open in new tab ↗

The Furniture Showroom template takes a quieter approach in the same spirit, turning catalogue leaves in 3D around an invisible spine.

This works for printmakers, physical product studios, stationery brands, and editorial publications. It has high personality, which also means high risk: on a SaaS tool or banking dashboard it will feel like a gimmick, but on a maker’s portfolio it reinforces the craft.

3. The shared element handoff

A photograph, card, or headline from the active page travels across the navigation and docks into its final placement on the incoming page, typically using GSAP Flip.

This is the most functional pattern of the group. It provides direct cognitive continuity: the visitor watches the exact project thumbnail they clicked expand into the case study hero. The Real Estate template uses this to carry listing photos into property detail views, and both the Construction Company template and Multi-Page Portfolio template pull index photographs into their respective case studies.

If you want to apply this same morphing logic within a single page rather than across routes, the FLIP Layout Morph handles that exact grid-to-detail expansion with automatic reflow. Across full page navigations, the main technical catch is element parity: both pages must share matching assets, and the incoming image must be preloaded so the card does not land on an empty placeholder.

4. The cover and title card

Solid panels sweep over the current page, hold briefly on a typography card displaying the destination’s name, and pull away to unveil the incoming view.

The title card is the functional anchor here: it tells the visitor where they are going while the browser loads the payload underneath. We use this directional panel system across the Multi-Page Portfolio template, where bold destination typography and incoming photography settle into place as the panels clear.

The great advantage of this visual language is how cleanly it connects to the rest of the site. You can mirror the exact same wipe mechanics in a Page Preloader on first visit, or reuse the panel motion in a Curtain Menu Overlay so the whole site shares one consistent animation dialect from preloader to navigation menu to page change.

5. The weighted push

The incoming page drives into the frame horizontally and displaces the current page, using easing curves that convey physical weight.

Direction carries navigation meaning: moving forward pushes from the right; clicking Back pulls in reverse from the left.

You can see two opposite emotional takes on this in our templates. In the Fitness Gym template, pages enter with the brutalist momentum of an equipment sled: a heavy push, skidding lane markings, and an abrupt stop on arrival. In the Pilates Studio template, we used elastic resistance instead: the screen slides sideways against four coloured springs, pauses on the destination name, and rebounds home with an overshoot that gently settles.

This suits athletic, kinetic, or tactile brands. Because large-scale horizontal displacement can induce vestibular discomfort, an instant-swap or clean opacity fallback for reduced motion is non-negotiable here.

6. The staged build

Rather than a single panel wipe, the transition constructs itself in sequential steps that reflect how the brand operates.

In the Construction Company template, structural floor slabs stack storey by storey with an animated floor counter ticking upward before the slabs lift away top-first. The slabs adopt the specific sector colour of the destination, signaling which department the visitor is entering before the page renders.

This suits engineering, construction, architecture, and logistics brands that have a real process to dramatise. Keep it tightly timed: staged animations take longer to read, so every phase must convey real brand information rather than idle motion.

7. The persistent shell

The global interface (header, navigation bar, logo, and theme toggles) remains completely static while only the main document container updates underneath.

In the Multi-Page SaaS template, the header, mega menu and theme never flinch during navigation. Only the main column clears and rewrites itself like log lines, while a small job chip reports the request queued, running and done with the real milliseconds it took.

This is the right pattern for documentation, SaaS applications, dashboards, and portals where visitors navigate dozens of links per session. When interaction frequency is high, full-viewport wipes quickly cause fatigue. Keeping the motion inside the content column protects the visitor’s focus while preserving UI state.

When you do not need a navigation at all: scroll handoffs

Sometimes clients ask for a page transition when what they really need is continuous storytelling on a single document. If your “next page” is actually the next chapter of an introduction, you can skip client-side routing entirely and let scroll drive the reveal.

Patterns like the Scroll Sequence Hero Transition (which scrubs through a canvas frame sequence that lifts into content) or the Split-Screen Hero Handoff (which opens a video hero like shutters onto the content beneath) give that cinematic sense of arrival without the overhead of link interception.

Building transitions that feel instant

We do not set arbitrary duration caps on transitions, and several patterns above run past a second. What matters is that the site never makes the visitor wait.

Start on the click, not after the network

The first frame of motion must land on the immediate tick after the click. Any dead frame, while a script processes routing or waits for a network handshake, feels like dropped input. Fire the exit animation immediately and run data fetching concurrently.

Load during the motion, not after it

The animation should absorb network latency, never add to it. Trigger the fetch on click, run the exit timeline at the same time, and only trigger the enter animation once both have resolved.

On high-speed connections, the visitor gets smooth choreography. On slower connections, the transition holds naturally on its cover or title card rather than halting awkwardly.

Here is a resilient implementation pattern:

let isNavigating = false;

async function navigate(url) {
  // Prevent duplicate runs if the visitor double-clicks or clicks mid-flight
  if (isNavigating || url === window.location.href) return;
  isNavigating = true;

  try {
    // Run the network request and the exit animation in parallel
    const [html] = await Promise.all([
      fetchPage(url),
      playLeave() // returns a promise, e.g. a GSAP timeline's .then()
    ]);

    swapContent(html);
    await playEnter();
  } catch (err) {
    // If the network drops or times out, fall back to native navigation
    window.location.href = url;
  } finally {
    isNavigating = false;
  }
}

async function fetchPage(url, timeoutMs = 4000) {
  const controller = new AbortController();
  const timer = setTimeout(() => controller.abort(), timeoutMs);

  const res = await fetch(url, { signal: controller.signal });
  clearTimeout(timer);

  if (!res.ok) throw new Error(`HTTP ${res.status}`);
  return res.text();
}

If the connection drops or hangs past four seconds, the catch block falls back to native navigation. A transition should never trap a visitor on a dead screen.

This sketch simply ignores a second click. The Vault’s templates go further: a click mid-transition cancels the first navigation and goes straight to the new page, so the visitor never has to click twice.

Defend against bfcache freezes

Modern browsers cache full page states in the back/forward cache (bfcache). If a visitor navigates away and then hits the browser’s Back button, the browser may restore the previous DOM with your transition overlay permanently stuck at full opacity.

Clear overlays on the pageshow event whenever the page is restored from cache:

window.addEventListener('pageshow', (event) => {
  if (event.persisted) {
    gsap.set('.transition-overlay', { opacity: 0, pointerEvents: 'none' });
    isNavigating = false;
  }
});

Carry the visitor’s eye

Good transitions establish visual continuity. The disc expanding from a tap, the thumbnail growing into a hero image, and the title card naming the next section all bridge where the visitor clicked to where they arrive. Before picking a pattern, ask what the visitor’s eye should follow across the navigation. If there is no natural focal point, reach for a quiet shell crossfade.

Stick to one signature transition

Choose one transition language and apply it across every internal route. Consistency makes motion feel like an intentional part of the brand rather than a collection of demos. Directional variations (reversing timelines for Back navigation) provide spatial clarity while preserving that consistency.

Respect reduced motion

Under prefers-reduced-motion: reduce, replace motion with an instant swap or a gentle opacity fade. Crucially, keep all functional navigation steps (focus management, title announcements, scroll resets) active, because accessibility applies to the entire journey:

const reduceMotion = window.matchMedia('(prefers-reduced-motion: reduce)');

function transitionFor(url) {
  return reduceMotion.matches ? instantSwap(url) : navigate(url);
}

Tidy up scroll, smooth scroll, and ScrollTrigger

When you intercept browser navigation, you take responsibility for tasks the browser previously handled automatically:

• Scroll restoration. New pages should start at the top (or at an anchor hash); history traversals should return to the saved scroll offset. Set history.scrollRestoration = 'manual' and track scroll coordinates yourself.
• Smooth scroll libraries. If using Lenis or similar smooth scrollers, call lenis.stop() before running the transition, reset the scroll position with lenis.scrollTo(0, { immediate: true }) after content swaps, and call lenis.start() once the new layout mounts.
• ScrollTrigger cleanup. Revert all active timelines from the outgoing page using a parent gsap.context(), initialise the new page’s scripts, and call ScrollTrigger.refresh() so measurements match the incoming DOM.

Focus and announcements for screen readers

Native document loads inform assistive technology that a new page has arrived. Client-side swaps do not unless explicitly told to.

After swapping content, update document.title, move keyboard focus to the incoming page’s primary heading (adding tabindex="-1" so it can receive focus), and announce the change through an aria-live="polite" region. Ensure the transition overlay itself has aria-hidden="true" and pointer-events: none when idle.

Keep real links underneath

Every page must exist as a standalone HTML document accessible via a standard anchor tag. Your router should only intercept plain same-origin clicks. Modified clicks (Cmd+click, Ctrl+click), right-clicks, middle-clicks, downloads, and external URLs must behave natively. If JavaScript is disabled or a CDN fails, links should navigate normally.

Choosing your tooling

There are three practical paths to implementation:

The View Transitions API, for clean crossfades. Cross-document view transitions animate between native page loads with pure CSS:

@view-transition {
  navigation: auto;
}

Assigning a view-transition-name to a persistent header keeps it pinned while the main body crossfades. That is how our Ops Console UI Kit handles navigation between app screens: the sidebar and top navigation stay locked while sub-panels crossfade with zero router overhead. Every navigation remains a real page load, meaning analytics, scripts, and layout measurements reset cleanly without router maintenance.

The limitation lies in custom choreographies: because the native API freezes the outgoing page as a snapshot and waits for the incoming document before animating, it cannot run an active GSAP timeline during network load, hold on an animated title card, or reverse a live timeline on demand.

Custom GSAP router, for signature transitions. A small router structured around the navigate() function above gives you complete creative control. You decide when the leave finishes, how network delays are absorbed, and how elements morph across routes, all while maintaining standard HTML underneath. This is the model used across the Vault’s multi-page templates, where a single shared utility handles prefetching, history, and cleanup while each design supplies its own timeline.

Barba.js or Swup, for existing projects. Both libraries provide mature PJAX lifecycles and hook cleanly into GSAP timelines. They are solid options if you want an established plugin ecosystem and do not want to maintain custom link interception logic.

The golden rule of page transitions

If you are evaluating whether your transition is working, run this test: click through four pages in rapid succession as quickly as your fingers can move.

If you feel even a momentary urge to skip the animation or wait impatiently for the UI to catch up, the transition is too heavy. The goal of a great page transition is not to make visitors marvel at the motion; it is to make the site feel fast, continuous, and responsive to every touch.

Looking for complete implementations? Browse the page transition templates to see these patterns running on multi-page sites (the signature multi-page ones come with the Templates Pass or the Vault), or explore GSAP loading animations for drop-in transition and preloader components.