Crossfade transitions between views

Area: Atmosphere Milestone: v3

Context

Problem: Navigating between pages in BibleWeb is instantaneous but abrupt — the content just appears. A subtle transition would make navigation feel smoother and more polished.

Solution: A CSS opacity crossfade (0→1) over 300ms on route changes, using SvelteKit's built-in page transition support.

Not included: Slide animations, page-specific transitions, or loading skeletons. Just a universal opacity fade.

Functional

Expected behavior:

When navigating to a new page, the content fades in over 300ms
Fade uses ease-out timing (fast appearance, gentle settle)
Applies to all route changes
No animation on initial page load

UX & Design

Animation:

Property: opacity
From: 0 → To: 1
Duration: 300ms
Easing: ease-out

No animation on initial load — only on subsequent navigation.

Technical

Implementation: SvelteKit has built-in page transitions via onNavigate in +layout.svelte:

import { onNavigate } from '$app/navigation';
onNavigate((navigation) => {
  // Use View Transitions API or manual opacity transition
});

Alternatively, CSS transition on the <main> element triggered by a route-change reactive state.

Files:

apps/web/src/routes/(app)/+layout.svelte (modify — add transition)

Status

Current: PLANNED Milestone: v3 Priority: Low — visual polish

Dependencies:

Requires: SvelteKit routing (DONE)

← Back to Atmosphere features