Animating between web pages

Animating between web pages

Posted May 24, 2023 ⋆ Last modified Nov 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.