Early Days Examples of View Transitions Chris Coyier

May 18, 2023

All of these are page transitions, like when you leave one page and go to another. As opposed to the document.startViewTransition kind, which are also cool, but not as game-changing.

Here’s my playing around, which you can see in this Project.

That’s an <a> that turns into a <div> on the next page, because that’s just something you can do and it’s amazing.

Here’s Dave’s Site:

Austin Crim did the same kinda thing:

Here’s Jim playing around:

Maxi Ferreira built an Astro site with page transitions based on a design by Ehsan Rahimi:

Here’s Adam “stress testing” what it can do:

You can always feel a tiny smidge of a delay, which I’m sure is because the browser needs to request the next page and (I think?) render it so it can be sure to find any matching view-transition-names on elements in order to tween. Worth it.

Related

🤘

ncG1vNJzZmibmKe2tK%2FOsqCeql6jsrV7kWlpbGdganxyhI6emKukqWKxosXSZpyxmZ2luaa%2FjKidZq6ZmsRuwNGapayhpJ68r7%2BO