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.

Thoughts? Email me or comment below. Also CodePen PRO is quite a deal. 🙏

Leave a Reply

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