View transitions with video

The latest iteration of the View Transitions API will actually let you transition video while it's playing.

Few web APIs continue to inspire and amaze me like the nascent View Transitions API. You might have heard it called Shared Element Transitions—it's undergone a bit of a rebrand. I wrote about it a little bit back in May, but it's come a long way since then.

Specifically, it feels like the messaging around View Transitions is pivoting a bit from "animate page transitions" to "animate any transitions". No demo has illustrated this quite as well as Jake Archibald's recent picture-in-picture demo.

A playing video transitions from full-screen to picture-in-picture without pausing.
Just look at that! Look at it!

In it, a video playing at full-width is transitioned to a picture-in-picture frame in the bottom right-hand corner—but it continues to play throughout the transition! The current API just takes a screenshot and then crossfades to the transitioned element, but this one doesn't.

Transitioning an element that is itself moving feels like a solution to the three-body problem or something. Just fantastic.

(Note you'll need to have the View Transitions flag enabled in chrome://flags for the demo to work.)

View Transitions video demo, Jake Archibald

Web Design Browser

Next

Farewell, Twitter

I'm no longer on Twitter (for obvious reasons) and I share a lot of sentiment about it with Simon Collison.

Previous

Personal website design archetypes

Some quick thoughts on broad categories of personal website design.