Martin Trapp
@martr.app
Maintainer at @astro.build 🚀
Maker of 👜 Bags of Tricks ✨for view transitions @vtbag.dev
Maker of 👜 Bags of Tricks ✨for view transitions @vtbag.dev
Pinned
Martin Trapp
@martr.app
· Nov 8
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.
You know Xmas is coming when ...
Navigation API, document.activeViewTransition, and soon 🥁: view transition types1
Navigation API, document.activeViewTransition, and soon 🥁: view transition types1
The gaps are closing!
November 25, 2025 at 8:21 AM
You know Xmas is coming when ...
Navigation API, document.activeViewTransition, and soon 🥁: view transition types1
Navigation API, document.activeViewTransition, and soon 🥁: view transition types1
November 14, 2025 at 8:38 PM
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.
This API is SOOOOOOO good … can't wait for it! 🤩
I'm using it on some demos over at view-transitions.chrome.dev.
Get the details about this API at developer.chrome.com/docs/web-pla...
I'm using it on some demos over at view-transitions.chrome.dev.
Get the details about this API at developer.chrome.com/docs/web-pla...
November 8, 2025 at 10:45 AM
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.
View transitions are pretty neat, and I was fortunate enough to write a piece for @piccalil.li about putting them to work.
They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production.
#WebDev #ViewTransitions #CSS
They're such an exciting new part of the web platform, and I'm elated to see new and boundary-pushing effects making their way into production.
#WebDev #ViewTransitions #CSS
Declan Chidlow here with some really practical uses of view transitions, along with some of the stuff that will trip you up, with guidance to help you navigate that.
piccalil.li/blog/some-pr...
piccalil.li/blog/some-pr...
November 6, 2025 at 2:44 PM
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!
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!
Ladies and Gentlemen, Start Your Engines!
How to enable browser-native cross-document view transitions on your multi-page site.
vtbag.dev
November 4, 2025 at 11:09 PM
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!
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!
___
👉 When view transitions fail *only* on mobile, you know the universe is testing you. 📱🐛🌌
👉 When view transitions fail *only* on mobile, you know the universe is testing you. 📱🐛🌌
October 29, 2025 at 6:10 PM
___
👉 When view transitions fail *only* on mobile, you know the universe is testing you. 📱🐛🌌
👉 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/#...
Check out the recent changes at vtbag.dev/basics/api/#...
The View Transition API
Basics information about the View Transition browser API
vtbag.dev
October 20, 2025 at 3:11 PM
Quite a lot has happened in the View Transition spec this month!
Check out the recent changes at vtbag.dev/basics/api/#...
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!
Dive into this new article in The Bag to celebrate Firefox joining the party!
View Transitions Supported in All Major Browsers
Now that Firefox implements the View Transition API, what does that mean for your Astro project?
events-3bg.pages.dev
October 16, 2025 at 1:57 PM
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!
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...
October 15, 2025 at 9:38 PM
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?
Now guess which ones?
October 14, 2025 at 11:29 PM
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?
Now guess which ones?
Reposted by Martin Trapp
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.
To celebrate, here is a short video freshly captured in Firefox 144.
October 14, 2025 at 7:15 PM
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.
To celebrate, here is a short video freshly captured in Firefox 144.
Reposted by Martin Trapp
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 😊
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 😊
October 2, 2025 at 1:54 PM
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 😊
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?
Have you seen www.bram.us/2023/05/09/r...?
Extend it with a MutationObserver (or StyleObserver) and you can have it auto-transition :)
Extend it with a MutationObserver (or StyleObserver) and you can have it auto-transition :)
Rearrange / Animate CSS Grid Layouts with the View Transition API
Animate elements in a grid layout as new items are added, items change size, etc.
www.bram.us
October 2, 2025 at 11:56 AM
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?
Reposted by Martin Trapp
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!
September 22, 2025 at 8:18 AM
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!
Yes, you got it right!
September 18, 2025 at 1:07 PM
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?
Webkit: Release Notes for Safari Technology Preview 227
Webkit: Release Notes for Safari Technology Preview 227
Webkit: Release Notes for Safari Technology Preview 227
webkit.org
September 3, 2025 at 10:48 PM
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?
So I made a quick demo and a video cause I can explain it better there :D
Video is too big for bksy though...
video explain: youtu.be/h71tY66w7f8
first example: codepen.io/kevinpowell/...
second example: codepen.io/kevinpowell/...
Video is too big for bksy though...
video explain: youtu.be/h71tY66w7f8
first example: codepen.io/kevinpowell/...
second example: codepen.io/kevinpowell/...
September 3, 2025 at 9:43 PM
Interesting question from Kevin Powell: having several view transition actions on the same page, is it possible to run them independently?
Reposted by Martin Trapp
We all are craving ;-)
Yep, L1 is a good start. There are ways to extend that into cross-document view transitions, e.g. with Astro. Safari quickly followed up with L2. @firefox.com might prioritize other goals like the remaining interop 2025 features.
But they know the whole community is craving MPA view transitions!
But they know the whole community is craving MPA view transitions!
September 1, 2025 at 10:57 AM
We all are craving ;-)
As of right now:
Freshly minted in the view transition spec, official and all!
drafts.csswg.org/css-view-tra...
Freshly minted in the view transition spec, official and all!
drafts.csswg.org/css-view-tra...
August 25, 2025 at 4:36 PM
As of right now:
Freshly minted in the view transition spec, official and all!
drafts.csswg.org/css-view-tra...
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.
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.
Now is the time to point your regular Chrome browser (>=139) at vtbag.dev/basics/test-...
August 15, 2025 at 10:55 PM
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.
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!
That really made my day!
I'm in that video!
Forget five seconds of fame. I got six!
From the creators of ‘Over the Top Animations’ comes pure, unfiltered glory. The page falls, the crowd gasps — see it at 0:49.
I'm in that video!
Forget five seconds of fame. I got six!
From the creators of ‘Over the Top Animations’ comes pure, unfiltered glory. The page falls, the crowd gasps — see it at 0:49.
August 9, 2025 at 7:42 AM
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.
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.
August 3, 2025 at 10:08 PM
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.
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.