Early Days Examples of View Transitions

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.



I work on CodePen! I'd highly suggest you have a PRO account on CodePen, as it buys you private Pens, media uploads, realtime collaboration, and more.

Get CodePen PRO

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to Top ⬆️