Martin Trapp

Been lucky to benefit a lot from open source in my career. Since mid-2023, I've been giving back! As an Astro maintainer, I’ve focused on the client-side router, and I’m always ready to help with view transitions on Astro's Discord.

When those become available in all browsers we can finally get Astro‘s transition:persist natively on the web platform! Shout out to @fancypenguin.party, who envisioned and built this years ago 🫡

This is huge for MPAs. Once these features are Baseline, they’ll make a hell of a difference. The initial proposal is open for feedback, so don’t miss your chance to influence where it goes next.

Many thanks, @pablolarah.bsky.social, for the kind shout out and for sharing vtbag.dev with your followers. Your support means a lot and helps more developers discover these View Transition resources. It is greatly appreciated!

Reposting the repost 😈

🏔️🌲🦇🪵🍄🦉🐻🐾⛺🏕️🦌🦊🐰Come on now, surely there are more cracking examples of View Transitions out in the wild! 👀

As an alternative to mapping routes and matching paths, you can define the view transition type directly where it happens: on the link. I adapted the Chrome DevRel demo to use @vtbag/turn-signal/link-types 👨‍🔧 Same result, just a different way of thinking about it. vtbag.dev/navigation-t...

As always, the Bag's got you covered: vtbag.dev/basics/pseud...

The View Transition API is getting more forgiving: in future, duplicate view transition names will no longer cancel your animation. The API will sweep them aside, give you a nudge in the console, and carry on with the uniquely named elements. Catch all the recent changes on The Bag’s API page:

Little moment of joy today: Web Weekly #190 includes a reference to vtbag.dev! Seeing your own project pop up in a newsletter you genuinely enjoy reading is such a lovely surprise. Made my day. Vielen Dank! 😊

As a reply to an original post by @joyofcode.xyz that neatly shows the different stages of getting aspect ratio right in text-morphing view transitions, and to a brilliant article by @jakearchibald.com that explains it all in great depth with lots of fun.

If you enjoy @Bramus' View Transitions Toolbox, you should definitely also take a look at @vtbag.dev Utensil-Drawer: vtbag.dev/tools/utensi...

Great result! Love seeing Astro + Svelte working so nicely together. As for the vtbag.dev part: it was actually the other way round: From @fubits.dev I learned that trick of not redefining swap(), but executing the swap directly in the astro:before-swap event listener.

It would be nice if sibling-index could enumerate the position of pseudo elements. There is not much use in indexing ::before and ::after but I would have plenty of use cases for ::view-transition-group(*), especially in combination with nested view transition groups or scoped view transitions.

If you like Adam's article, you might also want to have a look at vtbag.dev/vector-demo/ and fun-with-view-transitions.pages.dev/episode/7/page

Sarah and Yan are both absolutely incredible people to have in your team and are a massive part of Astro's success. If you're looking to make your docs better, you'd be missing the opportunity of your life by not hiring them!

==> SPREAD THE WORD Hands-on tutorial for mastering View Transitions! Seven interactive exercises guide you from basics to advanced techniques: morphing snapshots, healing text, and more. Code at github.com/vtbag/fun-wi..., Episodes on vtbag.dev/fwvt/welcome/

Yes, I saw it on the list: cross-document view transitions including `link rel=expect`.

(Element)-scoped view transitions are going to change the game once they hit baseline!

Because it seems to be the thing right now:

Firefox view transition support is getting better and better.

Fuck you people. Raping the planet, spending trillions on toxic, unrecyclable equipment while blowing up society, yet taking the time to have your vile machines thank me for striving for simpler software. Just fuck you. Fuck you all. I can't remember the last time I was this angry.

It crashed often, but it was still a lot of fun back then. Just a handful of tags, no CSS, no scripts.

Happens to the best, @nerdy.dev 😃 One way or the other.

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...

events-3bg.pages.dev/jotter/tips/...

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/#...

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/#...