Motivka

Page Transitions and Element Reveal

Added View Transitions cross-fade navigation and a use:reveal Svelte action with IntersectionObserver for staggered element entrance animations across all public pages.

4 Phases
11 Tasks
1 Days

Motion and Presence

Every public page now has subtle entrance animations powered by a use:reveal Svelte action. Elements fade and slide into view as they enter the viewport, with randomised stagger delays for a natural, organic feel. The hero section on the homepage has a special one-time reveal sequence stored in sessionStorage.

View Transitions

Cross-page navigation uses the View Transitions API via SvelteKit's onNavigate hook, adding a smooth cross-fade between pages. The system respects prefers-reduced-motion — all animations are disabled when the user prefers reduced motion.

Back-navigation skips the reveal animations to avoid repetition, and admin pages are excluded from the animation system entirely.

Features Delivered

Foundation

  • use:reveal Svelte action — IntersectionObserver-based entrance animations with randomised stagger
  • View Transitions cross-fade — Smooth page transitions via onNavigate hook

Page Integration

  • All public pages animated — Homepage hero, content pages, devlog, experiments, showcase