Interlude

Astro starter for page transitions

21 transitions

Back

06 (moving the page)

stack

The page steps back like a card, and a sheet slides up over it.

On the click, the whole page, header included, shrinks and darkens on a dark background, and a sheet the colour of the page slides up over it. Once the next page is ready, the sheet fades and the new content comes in. Going back looks the same: another card on the pile.

The page that steps back is a still copy kept in the layer, so the real page never moves. Videos and canvases are copied as they are on screen, and components and embeds don’t start again.

Inspired by the project page transition on Olga Prudka’s site.

File
src/transitions/stack.ts

Its settings are at the top of the file.