View Transitions

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 […]

I’m a big fan of View Transitions. Part of what they can do, animating elements across fresh page loads, is a uniquely powerful ability. The performance story, though, is a bit complicated. You might think because you don’t have to reach for a JavaScript framework with Single Page App abilities to do this, it could […]

Google has this little widget called Baseline. Here’s a screenshot example: The idea is for it to accompany a web platform feature so you can have a sense of what browsers support it. Web developers are rightfully skeptical of new web tech, wanting to know when they can actually use a feature, so this is […]

If you want to use multi-page view transitions, this used to be a prerequisite: That’s dead. Now you do this: Thanks to Bramus for the PSA and update article.

Like anyone, I love a good “native-feeling” experience on the web. I’ve really enjoyed creating that vibe with the new View Transitions API. Luckily it’s is pretty clean to work with, both with the Astro framework, and out of the box! View Transition Options Transitioning UI between states has been something that developers have been […]

Jake Archibald has some great examples of awkward gotchas with View Transitions. View Transitions are naturally great at tweening one state of a DOM element to the next, but you’ll see likely-unwanted ghosting if the element changes shape from one state to the next. You can either prevent it from changing shape by changing either […]

I’m already a little over all the green. What was I thinking? I’m much more of a nice gray color palette kinda guy with some fun poppy colors. That’s what we need to get to here. When we left off, we just had wireframes going. It’s time to get some style on this thing! Custom […]

While I was over on Codrops reading Adam’s article about Scroll-Driven animation, I also read Noam Rosenthal’s article about View Transitions. Noam is also at Google and working on the View Transitions API, so knows it pretty intimately, and found enough gaps that a library around it was warranted. That’s what Velvette is: a library […]