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.

Do not miss this Guided Tour to Outer Space! Blast off into styling #ViewTransitions, including morph animations along arbitrary paths! (👜✨link in quoted post) Follow along on CodePen or enjoy the @astrojs example (your choice of <ClientRouter/> or @view-transition)! codepen.io/martrapp/pen...

Well done, @miguel.reeple.studio! View Transitions are always fun! Thank you for sharing! (-out-of-exclamation-marks-)

Bye bye #CloudFest

1/2 Lately, interesting articles by @dannymoerkerke.bsky.social and @bram.us show how to modify the keyframes of the group animation using JavaScript. In some cases, you can achieve the effect with simple CSS! The trick is to define an animation for the image-pair that adds to the group's animation

This is essential for vivid cross-document view transitions: 1) run animations backward on history back navigation, 2) use different animations when users go back or forth through your ordered pages, 3) vary animations to a page by simply annotating the incoming links with view transition types!

I had a good laugh today: Saw a Shrek 5 announcement, instantly had to blast All Star by Smash Mouth, and for the first time, I realized the original album from the last millennium has the same name as @astro.build's Discord server: Astro Lounge. That has to mean something! 😆

Episode 5 of Fun with View Transitions is here! Loaded with solutions for real-world challenges in MPAs: - Forward/backward directions (on all browsers) - Fix pseudo-smooth-scrolling - Fix stacking order during view transitions - Reliable transitions with blocking="render" Don't miss it!

The “next big thing” for the View Transition API!

🏥 Struggling with bloated, unreadable text in your view transitions? Get the treatment your animations deserve! Check out the latest episode of the 👜 Bag's ✨ Fun With View Transitions series #ViewTransitions

The Bag is back and wants you to embark on a journey into the marvelous land of the View Transition API! Follow along with your own MPA site as we level up navigation using browser-native cross-document view transitions!

I’m longing for a sunny spring day!

Astro was first to give users the ability to implement, experiment with, and gain experience in cross-document view transitions as early as mid-2023. With the now growing support for @view-transition, the time may come to shift your Astro.js site to the web standard. Happy transitioning! #withastro!

Looking forward to when view transitions have overcome the few teething troubles! 👍😉

Fully compatible with Astro 5!

Just add view transition types directly to the links! It’s such a great way to control animations of cross-document view transitions! <a href="/link-demo/5/" data-vtbag-link-types="left rough / right">➡️</a>