# Unlocking view transitions in SvelteKit 1.24

DevFeed: [Unlocking view transitions in SvelteKit 1.24](<https://devfeed.tech/articles/unlocking-view-transitions-in-sveltekit-1-24-3054.md>)

Original publisher: [Read original article](<https://svelte.dev/blog/view-transitions>)

Author: Geoff Rich

Published: 2023-08-31T00:00:00Z

Content type: tutorial

Language: en

Sources: [Svelte blog](<https://devfeed.tech/sources/svelte-blog.md>)

Topics: [Web Development](<https://devfeed.tech/topics/web-development.md>), [interactive web experiences](<https://devfeed.tech/topics/interactive-web-experiences.md>), [web applications](<https://devfeed.tech/topics/web-applications.md>)

Tags: [api](<https://devfeed.tech/tags/api.md>), [browser](<https://devfeed.tech/tags/browser.md>), [chrome](<https://devfeed.tech/tags/chrome.md>), [chromium](<https://devfeed.tech/tags/chromium.md>), [how-to](<https://devfeed.tech/tags/how-to.md>), [integration](<https://devfeed.tech/tags/integration.md>), [view-transitions](<https://devfeed.tech/tags/view-transitions.md>), [web-development](<https://devfeed.tech/tags/web-development.md>)

## AI overview

A tutorial on integrating the browser View Transitions API with SvelteKit 1.24 using the new navigation lifecycle hook. It explains how transitions animate DOM updates and how to provide a non-animated fallback in unsupported browsers.

## Source excerpt

The view transitions API has been sweeping the web development world lately, and for good reason. It streamlines the process of animating between two page states, which is especially useful for page transitions. However, until now, you couldn't easily use this API in a SvelteKit app, since it was difficult to slot into the right place in the navigation lifecycle. SvelteKit 1.24 brought a new onNavigate lifecycle hook to make view transitions integration much easier - let's dive in. How view transitions work You can trigger a view transition by calling document.startViewTransition and passing a callback that updates the DOM somehow. For our purposes today, SvelteKit will update the DOM as the user navigates. Once the callback finishes, the browser will transition to the new page state -- by default, it does a crossfade between the old and the new states. var document: Document window.document returns a reference to the document contained in the window. MDN Reference document.Document.startViewTransition(callbackOptions?: ViewTransitionUpdateCallback | StartViewTransitionOptions): ViewTransition The startViewTransition() method of the Document interface starts a new same-document (SPA) view transition and returns a ViewTransition object to represent it. MDN Reference startViewTransition(async () => { await const domUpdate: () => Promise<void>domUpdate(); // mock function for demonstration purposes }); Behind the scenes, the browser does something really clever. When the transition starts, it captures the current state of the page and takes a screenshot. It then holds that screenshot in place while the DOM is updating. Once the DOM has finished updating, it captures the new state, and animates between the two states. While it's only implemented in Chrome (and other Chromium-based browsers) for now, WebKit is also in favor of it. Even if you're on an unsupported browser, it's a perfect candidate for progressive enhancement since we can always fall back to a non-animated