The View Transitions API: Smooth Page and State Changes in CSS
View transitions let you animate between two DOM states with one function call. Here is how I use them for page navigations and UI changes. The View Transitions API is one of those features that feels like magic the first time you use it. You take a snapshot of the current page, change the DOM, and the browser animates between the two states automatically. crossfades, morphs, the works. What used to require a library like Framer Motion and hundreds of lines of animation code now takes a single function call. I first used it on a photo gallery app. Clicking a thumbnail needed to smoothly expand it into a full-screen viewer. The old implementation was 150 lines of JavaScript measuring element positions, creating overlay elements, and manually animating transforms. With view transitions, it was 10 lines of CSS and one line of JavaScript. Same visual effect, one-tenth the code. The Basic Mechanism At its simplest, you wrap your DOM update in a startViewTransition call. The browser captures a screenshot of the current state, applies your changes, captures the new state, and animates between them with a default crossfade. // JavaScript side document.startViewTransition(() => { //…