Astro View Transitions Have Free Page Animations — Here's How to Add Them in 5 Minutes
Full-page navigations feel jarring. Astro View Transitions make your MPA feel like an SPA — with smooth animations and zero client-side routing. What Are View Transitions? View Transitions are a browser API that animates between page navigations. Astro integrates them so multi-page apps get SPA-like transitions with no JavaScript framework. Quick Setup --- // src/layouts/Layout.astro import { ViewTransitions } from 'astro:transitions'; --- <html> <head> <ViewTransitions /> </head> <body> <slot /> </body> </html> That is it. Every page navigation now has a smooth crossfade animation. Built-in Animations --- import { fade, slide } from 'astro:transitions'; --- <!-- Fade (default) --> <div transition:animate="fade"> Content fades in/out </div> <!-- Slide --> <div transition:animate={slide({ duration: '0.3s' })}> Content slides in from the side </div> <!-- None (instant) --> <div transition:animate="none"> No animation </div> <!-- Initial (only animates on first load) --> <div transition:a
Continue reading on Dev.to Webdev
Opens in a new tab
