Martin Trapp

@martr.app

492 Followers 157 Following

Maintainer at @astro.build 🚀 Maker of 👜 Bags of Tricks ✨for view transitions @vtbag.dev

there‘s a bug, where the hell is it!? oh… view-transition-name —instead of— view-timeline-name 😅
:mega: Quick heads up for anyone battling View Transition FOUC issues :bag_of_tricks: Today I am sharing a quick tip for when the Client Router surprises you with flashes of unstyled content. This pattern showed up in a bunch of very different projects over the past few months. Oddly enough, it always seemed to involve Vercel’s `<SpeedInsights />` component, but that is just a funny coincidence. The same issue can happen with many other elements as well. https://events-3bg.pages.dev/jotter/tips/flash-of-unstyled-content-during-view-transition/ Stay curious and keep your styles where they belong! :sparkles:
a screenshot from the vtbag.dev website that has some view transition demos with a fox emoji.
Fire image from the slides linked in the original post
A screenshot from dev tools of Firefox Nightly, taken during a level 1 view transition. It shows the pseudo-element and the animation name for the first 20 animations created by the View Transition API.
Apple says that iOS 18.4 will download 3.4.2 GB, and you will get 8 new emojis.
CloudFest entrance
Near 200 swirling images in a view transition tech demo
Street lamps enlightening a lonely park way in a foggy, cold, wet night.
A screenshot of @vtbag/inspection-chamber. This is a development tool especially targeted for developing view transitions. There is a panel in the middle of the image that shows the keyframes for the ::view-transition-group(bsky) animation where the 100% values are all set to the properties initial values.
The Inspection Chamber of the Bag of Tricks is a dev tool that let's you put your view transitions through their paces (vtbag.dev)
A view transition tech demo where the elements of a list get shuffled without escaping their container.
A screenshot showing that Chrom 131 supports a lot of new APIs (at least behind flags)
html page where the headers state that this site runs on Starlight 0.30.0 and Astro 5.0.5
New Starlight version for Astro 5.0 released!
A screenshot showing that Safari 18.2 supports cross-document view transitions but lacks navigation API features
Capture of the website at https://vtbag.dev where I ask visitors to follow me on Bluesky. Then the video shows that navigation to another page on that site starts an animation where the two butterflies shown on the page "fly away".