Skip to content
arrie.dev Templates
Commission

Animations

Soft Cut

Page transitions for an Astro site, with a fallback where the browser has none.

R800

Once. Yours to keep

Get this template

The shape of it, not a screenshot

What it is

Transitions between pages on a multi-page Astro site: a crossfade, a directional slide for back and forward, and a shared-element move where a card becomes the header of the page it opens. Built on the browser's View Transitions API where that exists, with a scripted fade where it does not, so navigation behaves the same either way.

It includes the router setup, the transition names on the elements that need them, and the parts that usually go wrong — scroll position on back navigation, focus moving to the new page's heading, and scripts re-running after a swap. A four-page demo site wires a listing, a detail page, a form and a 404 together so the behaviour can be seen end to end.

For a developer or agency running an Astro site who wants navigation to feel less abrupt. It assumes Astro; on a plain static site the routing half would have to be rebuilt. Under prefers-reduced-motion the transitions are dropped and pages swap with no motion at all.

Included

What you get

  • router setup for Astro with per-route transition names
  • three transitions: crossfade, directional slide, shared element
  • fallback path for browsers without View Transitions
  • scroll restore and focus handling on navigation
  • four-page demo site: listing, detail, form, 404
  • reduced-motion path that swaps with no motion
How it works

After you buy

  1. 01 You message me On WhatsApp. Tell me which one and where it is going.
  2. 02 I set it up for you Your words, your colours, your logo dropped in — or the raw files if you would rather do it yourself.
  3. 03 It goes live On your hosting or on mine. Either way it ends up in your own account.
  4. 04 It is yours The whole thing, with nothing to renew and nothing tied back to me.
Nearby

You might also want

Next Signet Twenty-Six