Use this file to discover all available pages before exploring further.
svelte5-router supports animated route transitions through the viewtransition prop on <Router>. When set, the router wraps its rendered content in a keyed <div> block that re-mounts on every pathname change, triggering an in: and out: transition. You can use any of Svelte’s built-in transitions (such as fade from svelte/transition) or supply a fully custom CSS-based animation via the css callback.
View transitions are experimental. The API may change in a future release. Test thoroughly before using in production, and be aware that simultaneous in and out transitions on the same DOM subtree can cause visual overlap depending on your transition timing.
The viewtransition prop accepts a function with the signature (direction?: string) => Viewtransition. The router calls this function with the transition direction and passes the return value to both the in: and out: directives on the wrapper element.
type Viewtransition = { fn?: any; // A Svelte transition function, e.g. `fade` from svelte/transition delay?: number; // Delay in milliseconds before the transition starts duration?: number; // Duration of the transition in milliseconds x?: number; // Horizontal offset for slide-style transitions y?: number; // Vertical offset for slide-style transitions opacity?: number; // Starting / ending opacity (0–1) easing?: any; // A Svelte easing function, e.g. `cubicIn` from svelte/easing css?: (t: number) => string; // CSS string generator receiving a progress value 0–1};
When a fn is provided, the router delegates to that Svelte transition function. When fn is omitted but css is provided, the router drives the transition entirely from your CSS callback.
Omit fn and supply a css callback instead. The callback receives t, a number from 0 to 1 representing the transition’s progress, and must return a valid CSS string. The router applies this as inline styles to the wrapper element on each animation frame.The example below uses cubicIn easing for a scale-based entrance:
App.svelte
<script> import { Router, Link, Route } from "svelte5-router"; import { cubicIn } from "svelte/easing"; import Home from "./routes/Home.svelte"; import Contact from "./routes/Contact.svelte"; let url = $state("");</script><Router {url} viewtransition={() => ({ duration: 500, easing: cubicIn, css: (t) => `scale: ${t}; transform-origin: center center;`, })}> <nav> <Link to="/">Home</Link> <Link to="/contact">Contact</Link> </nav> <main> <Route path="/contact" component={Contact} /> <Route path="/" component={Home} /> </main></Router>
As t goes from 0 → 1 on entry, the content scales up from nothing to full size. On exit, t goes from 1 → 0 and the content shrinks away.
The function passed to viewtransition receives an optional direction string ("in" or "out"). Use it to return different parameters depending on which direction the animation is running:
A Svelte transition function (e.g. fade, fly, slide)
delay
number
Milliseconds to wait before starting the transition
duration
number
Total transition duration in milliseconds
x
number
Horizontal translation offset in pixels
y
number
Vertical translation offset in pixels
opacity
number
Target opacity at the start/end of the transition (0–1)
easing
any
A Svelte easing function (e.g. cubicIn, elasticOut)
css
(t: number) => string
Returns a CSS string for each frame; t runs 0→1 on enter, 1→0 on exit
Combine easing with css for smooth, non-linear custom animations. All standard easing functions from svelte/easing — linear, cubicIn, cubicOut, cubicInOut, elasticOut, and so on — work as-is with the easing field.