Interlude

Astro starter for page transitions

21 transitions

Get started

No package to install: copy the engine into your Astro site, keep the transitions you want, and write your own.

How it works

  1. Cover

    You click a link. While Astro fetches the next page, the transition covers this one.

  2. Swap

    Astro's router swaps in the new page underneath the cover, and updates the history.

  3. Reveal

    Once the new page's fonts and the images at the top are loaded, the transition uncovers it.

Why Interlude

  • Astro's own router

    Page loads, prefetching, history and scroll position stay with Astro, so its page scripts keep running with each navigation.

  • Accessible

    Clicks and keys are blocked while a transition runs, focus moves to the new page, and with reduced motion pages swap without animation.

  • WebGL when you want it

    Shaders run on WebGPU, or on WebGL 2 where it isn't available. three.js loads only when a visitor hovers or taps a link that uses one.

Set it up01

Clone the repository, then install and start the demo. It needs Node 22.12 or newer.

npm install
npm run dev

Add a transition02

Each file in src/transitions/ is one transition, and its name must match the file name. leave covers the page; enter uncovers the new one.

import { gsap } from 'gsap';
import { defineTransition, panel } from '../lib/interlude';

export default defineTransition({
  name: 'rise',
  leave: (context) =>
    gsap.fromTo(panel(context), { yPercent: 100 }, { yPercent: 0, ease: 'power2.inOut' }),
  enter: (context) =>
    gsap.fromTo(panel(context), { yPercent: 0 }, { yPercent: -100, ease: 'power2.out' }),
});

Use it03

Give a link a data-transition, or put one on an element around links to set it for all of them.

<a href="/about/" data-transition="rise">About</a>

<nav data-transition="rise">…</nav>

Going further

The README covers the rest: writing WebGL shaders, page-specific code, and the navigation events, for code that isn't tied to one page.

CodeArticle