Animating between web pages

Animating between web pages

May 24, 2023 ⋆ Updated November 26, 2024
Table of Contents
At the time of writing the View Transition API only works in Chrome Canary.

Enable the following feature flags in Chrome Canary

chrome://flags#view-transition
chrome://flags#view-transition-on-navigation

First line of code

Copy and paste this meta tag into your <head>.

<meta name="view-transition" content="same-origin" />

Second line of code

Decide on the element you want to transition from on page1.html. In this example, I’m using the page container <div>.

page1.html
<div style="view-transition-name: foo">
<!-- page content -->
</div>

Third line of code

Decide on the element you want to transition to on page2.html. In this example, I’m using the page container <div> for page2.html.

page2.html
<div style="view-transition-name: foo">
<!-- page content -->
</div>

Done! Now when you navigate from page1.html to page2.html (and vice versa), the browser will animate the transition between the two pages.