How-to guides
Animate route navigation
Enable slide or fade transitions with TanStack Router.
Install transitions
Configure src/router.tsx once after creating the router:
import "@akshatowo/radical/transitions.css";
import { browserTransitions } from "@akshatowo/radical/tanstack-start-client";
const transitions = browserTransitions(router);
// Retain transitions.cancel() and transitions.dispose() for teardown.Choose a transition
Set destination route static data:
staticData: { radical: { transition: "slide" } }, // or "fade"Verify navigation
If disabled, enable internalPlugins.transitions and regenerate before navigating through Router links.
You see the selected transition. With "slide", history back reverses the slide direction. With "fade", navigation fades in both directions.
sequenceDiagram
participant Router as Router commit hook
participant Effect as nativeTransition
participant Native as NativeTransitions plugin
Router->>Effect: nextId, transition, commit
Effect->>Native: cover(id)
alt Capture acknowledged with matching id
Native-->>Effect: id
Effect->>Router: commit once
Router-->>Effect: Commit completes
Effect->>Effect: painted: two animation frames
Effect->>Native: reveal(id, kind, direction, reducedMotion)
Native-->>Effect: Matching id acknowledgement
Effect->>Native: remove(id) in finalizer
else Capture fails or times out
Effect->>Native: remove(id), bounded and ignored on failure
Effect->>Router: commit once without animation
end
Check that failed commits remove overlays. See timeouts and reduced motion.