Skip to content

Components / Page transitions

Page transitions

3 components · 2 at 0 B

Motion between pages, on Astro's router.

page one

Iris.

page two

From the click.

Try the real swap →

Curtain

Page transitions

A full-viewport wipe between pages: the next page opens through an iris from where you clicked, or through blinds, a shutter, doors, pixels, staggered columns, a diagonal, or a title panel that carries the next page's name.

newly · Chrome 120 · Firefox 144 · Safari 18click

page one

Hero.

page two

Hero.

Try the real swap →

Page Transition

Page transitions

Animates a named region between pages: rise, zoom, wipe, scope, fade, slide, or the browser's own shared-element morph.

newly · Chrome 111 · Firefox 144 · Safari 18click
Ambient loopthe same element rides into the next page

Press play, then navigate: position, volume and playback carry over.

Persist Player

Page transitions

An audio player that keeps playing while you navigate: the same <audio> element is carried into the next page by Astro's router, so position, volume and playback never restart.

every browserclick