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-transitionchrome://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>
.
<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
.
<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.