Let's open today's window on the Advent calendar! @jp-knj.bsky.social writes about the different ways @astro.build and @nextjs.org have chosen to integrate view transitions:

Often it is better to reuse the built-in fade animations from the user agent stylesheet (-ua-view-transition-fade-in, -ua-view-transition-fade-out) rather than define your own: vtbag.dev/tips/over-ex...

You know Xmas is coming when ... Navigation API, document.activeViewTransition, and soon 🥁: view transition types1

Cool for many other things too, but especially cool for cross-document view transitions: finally you can tell front ⏩ from back ⏪! Honestly, trying to replace the default cross-fade with directional animations without the Navigation API is a bit like driving without turn signals.

A truly passionate article from someone who genuinely loves view transitions and knows exactly how to use them in a way that really supports the user experience, not just for the sake of the effect.

Now everyone’s posting CSS view transition beginner guides, huh? Time to bring back a classic. It’s not just about @view-transition, it also covers reduced motion prefs, the need for global styling, and, most importantly, introduces you to render blocking. Episode One of Fun With View Transitions!

For some mysterious reason, Google Search has decided to ignore vtbag.dev. Feel free to use any other search engine. Or simply add this to your system prompt: > If it has anything to do with view transitions, check vtbag.dev too!

___ 👉 When view transitions fail *only* on mobile, you know the universe is testing you. 📱🐛🌌

Quite a lot has happened in the View Transition spec this month! Check out the recent changes at vtbag.dev/basics/api/#...

It still feels like magic every time: with just Level 1 of the View Transition API, the <ClientRouter> brings cross-document view transitions to your Astro JS site. Dive into this new article in The Bag to celebrate Firefox joining the party!

If you liked the video, you might also enjoy clicking through the CodePen: codepen.io/martrapp/pen...

When you scroll down on vtbag.dev, you can find a few view transition demos at the bottom of the navigation sidebar that work perfectly even in Firefox v144. Now guess which ones?

As of today, every major browser supports Level 1 of the View Transition API! To celebrate, here is a short video freshly captured in Firefox 144.

Do you have any smaller/under-the-radar CSS sites/people that you follow? Looking for blogs, YouTube channels, or anyone who just shares cool CSS stuff. Reply if you know any, and look at the replies for new people/sites to follow 😊

Wow, hard to believe this was made over 2 years ago! Just tweak some CSS properties and let the browser figure out the transition. Why don’t we see animations like this on more websites by now?

For everyone who cannot wait until native cross-document view transitions arrive: Your Astrojs sites with <ClientRouter> will already support view transitions for same-origin navigation in Firefox 144!

Haha, that was easy, I read a good explainer ;-) vtbag.dev/basics/api/#...

Don’t trink and vibe! That might turn out to be very useful one day if I ever want to vibe-code half drunk. Please take note: botl.new redirects to bolt.new ;-)

Hey friends out there with access to Safari's latest Technology Preview: Does vtbag.dev/basics/test-... light up the indicators for the active view transition property and Navigation API in your browser?

Interesting question from Kevin Powell: having several view transition actions on the same page, is it possible to run them independently?

We all are craving ;-)

As of right now: Freshly minted in the view transition spec, official and all! drafts.csswg.org/css-view-tra...

Exciting news about Chrome 139! As @digitaltransient.bsky.social just posted, all the new view transition features that were hidden behind flags in the Canary versions are now available in regular Chrome.

Big thanks to @kevinpowell.co for showcasing my site in the examples. That was such a fun surprise!

This might sound extremely niche, but better to be prepared than sorry: Firefox will soon support same-page view transitions. More precisely: Level 1 view transitions. That means document.startViewTransition() with a single update callback and no view transition types.

Yes, that is what people often say. But “minimally functional” can still turn into “mildly maddening” if you do not realize you might need to help the browser out with a few extra directives to handle render blocking on larger pages.

View transitions are already looking pretty promising in Firefox Nightly. It’s actually kind of fun (view transitions are always fun)) to see how much of it is working now.

👜✨ Did you see? The 7th is out! The brand new episode of Fun With View Transitions! Playful curves, chained and merged transitions and much more. Half demo, half mischief! Steal the tricks, spark ideas, and bring fresh magic to your own site.

Fun with View Transitions, soon with even more fun! 👜✨ Next up: we are playing Tower of Hanoi! A grab bag of delightful tricks, oddities, and “wait, that works?” moments awaits you. Includes: a <select> element that transitions like it means it. Coming soon to a browser near you.

Explore entertaining ways to toggle between dark and light themes using view transitions! ☀️🌙

🤯 Ooh what?! I honestly had no idea about that! And it works like a charm! ✨ Chrome 139.0.7244.0 canary with "Experimental Web Platform features" enabled. vtbag.dev/basics/hide-... View transitions clipped at their container!

Alright, that’s now officially on my list of exciting rabbit holes to explore, where it’s already jostling for my attention with those other shiny mysteries.

The bag really outdid itself! Posted the teaser, forgot the link. Good going 👜✨📣❓🔗🚫👏🤦 And me, not noticing the missing link and reposting like a pro: 🙈 Here the Bag is back on track.

The Jotter has a new page about how to do same-document view transitions in Astro. Works fine in combination with cross-document view transitions and even with multiple use cases on the same page. Spoiler alarm: Most of it is not Astro-specific at all.

Hi @jensimmons.bsky.social 👋 It’s good that you advocate for respecting reduced motion! Another thing that can trip up beginners: sometimes you need <link rel="expect" href="#…" blocking="render" /> to make sure the browser waits for the top part of the page to load before view transitions start.

Feeling honored: Bramus picked up an idea we chatted about, extended his blog, and even linked back to The Bag! That is one heck of a compliment coming from someone whose talks and demos around view transitions (and far beyond!) I truly admire. Huge thanks, @bram.us, that really made my day!

Wild how little code powers this demo. Hit that "Toggle Code" button in the corner and see for yourself!

Here you can try it live! Every click triggers a view transition. If you click quickly, the latest one would rudely interrupt the active one. mayStartViewTransition() from @vtbag/utensil-drawer helps here by queuing update callbacks and batching them into new view transitions.

When I figured this out, it completely blew me away. ::view-transition-image-pair(.el) { animation-name: arc; } @keyframes arc {50% {transform: translateY( calc(var(--from-x) / 3 - var(--to-x) / 3) );}} --from... and --to... on each group's pseudo mark the start and end of its motion.

Just pulled out of The Bag. Don't miss this brand-new episode of Fun With View Transitions. This time, we dig into a mystery from the support channel of the astro.build discord. Come join the investigation!

Breaking: View Transition animations spotted in Firefox Nightly! I actually wanted to snap a shot of the pseudo-element tree, but the first proof ended up being a little more indirect.

🌫️🌫️ It has begun.🌫️🌫️ 🌫️🌫️ It is coming. 🌫️🌫️

View Transitions API meets Drag and Drop API! I am already looking forward to digging into, in a future episode of Fun with View Transitions, how we managed to start the morph animation of the tile exactly where it was released after the drag.

View transitions: they’re smooth, they’re stylish, and they have their own feed! A feed that gathers all things view transitions. No hard cuts, just pure animation magic. Follow and pin it before this post is forced into an exit animation from your timeline. bsky.app/profile/did:...

Way back when, we had to rename our HashIterator class before open-sourcing it because Legal, in all its case-insensitive wisdom, spotted a certain four-letter word hiding in plain sight at position 2.

Just saw you on "Smashing Meets Modern CSS", @nerdy.dev It is so much fun watching you live, trying to cram a three-hour lecture into a TikTok. Hope you catch your breath soon! Thanks so much! (And of course, you got the right answer for the most fun new addition to CSS!)

If you'd like to start contributing to open source projects, send PRs with failing test cases and no fix. Distilling minimal reproductions into proper test cases is a significant part of fixing bugs. Maintainers will fall in love with you.

Well... those might be supersized emojis. My first hard disk had 3 MB, also from Apple, back when that was huge.