{
  "$type": "site.standard.document",
  "createdAt": "2022-12-01T17:22:00+00:00",
  "description": "The latest iteration of the View Transitions API will actually let you transition video while it's playing.",
  "path": "/stream/view-transitions-with-video",
  "publishedAt": "2022-12-01T17:22:00+00:00",
  "site": "at://did:plc:swxoj3wjlwodcqs5ipmvgnug/site.standard.publication/3mnv7gbn3czno",
  "tags": [
    "Web",
    "Design",
    "Browser"
  ],
  "textContent": "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. 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",
  "title": "View transitions with video",
  "updatedAt": "2022-12-01T17:51:44+00:00"
}