View Transitions

View Transitions are of unique help in applying an animation to an element even when you are literally removing it from the DOM.

Each pseudo element plays a distinct role in how the view transition animates. The browser does most of the heavy lifting though, which makes it a little hard to see what’s actually happening under the hood.

I just blogged about a niche idea for View Transitions. Here are a couple more posts that specifically use the same-page style View Transitions and have a bit more practical demos:

Can you keep a video playing as a view transitions happens? Yes and no. Mostly yes.

It’s a generally good thing to know that browser support for browser features isn’t always quite a simple as yes or no. There can be sub-features involved as things evolve that roll out in browsers at different times. View Transitions is an example of that going on right now. There are “Same-Document View Transitions” supported […]

It’s pretty straightforward to animate list items into new positions, but there is a few tricks when the specific one you’ve chosen to move needs a *different* transition.

Accordion details, toggle switches, styleable selects, responsive video, and more!

When you use View Transitions on multiple elements, it can be a very nice look to stagger them out a little bit. It’s possible now, but a bit finicky. Let’s take a look at some code, present and future, that will help.

Imagine transitioning a bunch of items all set into ONE cell of a grid, then each having a unique animation when they move from that cell into where they would naturally fall on that same grid.

Ryan Seddon makes clear the potential performance problem with cross-page View Transitions: … on a slow or spotty network, the transition may appear as if the screen is freezing, as the browser waits for the page to load before it can transition smoothly between the two screens—this is not ideal. But also that our new […]