iiinova — where your digital self keeps evolving

Bag of Tricks for View Transitions @vtbag.dev · 31/07/2026

Reposted by Martin Trapp

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.

021

Martin Trapp @martr.app · 18/07/2026

I’m beginning to spot a pattern here.

011

Martin Trapp @martr.app · 07/07/2026

Hi @natemoo.re 👋, would you mind taking a quick look at this one?

Martin Trapp @martr.app · 07/07/2026

This belongs in the #showcase channel on the @astro.build Discord. Go show it off and make us all jealous! 😄

210

Martin Trapp @martr.app · 26/06/2026

Hi Jeroen, that is a cool heading. Congrats! Is ::after not working because of view transitions in the shadow DOM?

Martin Trapp @martr.app · 25/06/2026

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!

131

Martin Trapp @martr.app · 22/06/2026

Just to report back: existing animations were not the problem. What then? Please try not to laugh. I should have tested in Firefox, not Chrome. @starting-style works on ::view-transition-* in both, but Chrome seems to ignore it on ::view-transition. Naturally, that was where I started exploring.

codepen.io

CSS Transitions for View Transition Pseudos

...

Martin Trapp @martr.app · 21/06/2026

I hope the worst of it passes quickly and you feel more comfortable soon!

Martin Trapp @martr.app · 19/06/2026

Haha, yes. Even recent introductions still bring it up, usually as a prominent code block with a “this didn’t work for me” tone, despite the tag was replaced ages ago. Those articles are certainly doing a fine job of teaching every LLM on the planet to remember and suggest that tag forever. 😉

Martin Trapp @martr.app · 18/06/2026

Ah, that could very well be it! I don’t think I’d taken that into account. I’ll give it a try. Thanks for the tip!

Martin Trapp @martr.app · 18/06/2026

Talking about @starting-style: I’d be happy just to get @starting-style working with the ::view-transition-* pseudo-elements. Or am I just using it wrong?

Martin Trapp @martr.app · 16/06/2026

Instead of resizing the iframe, you could make it follow the browser’s window dimensions. Then it looks like the content flows on window resize. Your original solution has lower complexity and better reactivity. Settled then: not every transition between views is best done with view transitions.

Martin Trapp @martr.app · 15/06/2026

Reposting the repost 😈

Martin Trapp @martr.app · 26/05/2026

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

130

Martin Trapp @martr.app · 16/05/2026

Looking forward to it!

Martin Trapp @martr.app · 08/05/2026

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

Link Types Demo - vtbag.dev

The shiny Google Navigation Types Demo from the View Transition Toolkit, but now with @vtbag/turn-signal/link-types

021

Martin Trapp @martr.app · 03/05/2026

Yes, I happily set that up and then counted the minutes until you would reply ;-)

130

Martin Trapp @martr.app · 03/05/2026

Yes! I like that a lot. Very clean and straightforward. Setting view transition types on the link is a solid strategy. It is very similar in spirit to what @vtbag/turn-signal/directions does with data-vtbag-link-types attribute. It also opens the door to all those PowerPoint-style transitions...

Bag of Tricks for View Transitions @vtbag.dev · 30/04/2026

Reposted by Martin Trapp

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:

Basics information about the View Transition browser API

The View Transition API

1136

Martin Trapp @martr.app · 24/04/2026

Hi Michael👋, thank you for sharing this. This is absolutely impressive, and far more than I expected to be possible!

Martin Trapp @martr.app · 24/04/2026

Hi Cyd 👋, I guess bugs.webkit.org might be the right start.

Martin Trapp @martr.app · 21/04/2026

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! 😊

The Bag of Tricks for View Transitions

Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!

Martin Trapp @martr.app · 17/04/2026

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.

Martin Trapp @martr.app · 11/04/2026

Thank you for building such a cool app with it! View transitions are always fun!

000

Martin Trapp @martr.app · 10/04/2026

I just had a quick look and saw that you mentioned the site in the showcase channel on Astro's discord. Good on you! 😊

Martin Trapp @martr.app · 09/04/2026

Hi Paul👋 If you like Bramus' toolkit, you might also be interested in the tools, tips and tricks shared on vtbag.dev

The Bag of Tricks for View Transitions

Tools, Tips, and Tricks to Enhance your Dev Skills with the View Transition API!

100

Reposted by Martin Trapp

Bag of Tricks for View Transitions @vtbag.dev · 07/04/2026

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

A growing collection of lightweight utilities to help you craft polished view transitions.

The Utensil Drawer

051

Martin Trapp @martr.app · 02/04/2026

Ha ha, tried hard and failed epically. What lovely suggestions for future CSS properties.

Martin Trapp @martr.app · 01/04/2026

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.

Martin Trapp @martr.app · 27/03/2026

Reposted by Martin Trapp

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.

011

Martin Trapp @martr.app · 27/03/2026

011

Martin Trapp @martr.app · 22/03/2026

Delighted that nobody planed to name their app “Martr”. Perfectly safe as no one can pronounce it anyway.

040

Martin Trapp @martr.app · 17/03/2026

Yes, that‘s what I heard 😇

000

Martin Trapp @martr.app · 14/03/2026

@sarah11918.rainsberger.ca I think it is wonderful that Astro will not lose you entirely, and I am already looking forward to your “see you later” in the March newsletter. 😊

Martin Trapp @martr.app · 14/03/2026

Chapeau and h/t to you. 🎩👏✨ I hope you enjoy your well deserved time off! The lovely thing is that, despite the sadness that you will no longer be the guardian and champion of the Astro Docs, most the replies carry a sense of gratitude and fond memories.

140

Martin Trapp @martr.app · 09/03/2026

Yikes, that’s surprising! Now you’ve got me curious. I’ll check it out later.

100

Martin Trapp @martr.app · 07/03/2026

> They dont perfectly match Hi @nerdy.dev, I reckon delaying the start of the green ball in codepen.io/argyleink/pe... would sync them? (requestAnimationFrame(()=>requestAnimationFrame(()=>ball2.classList.add(state)));

120

Reposted by Martin Trapp

Bag of Tricks for View Transitions @vtbag.dev · 07/03/2026

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

A view transition tech demo were the old and new positions of morphing images control the trajectories.

The Vector Demo

043

Reposted by Martin Trapp

Erika @erika.florist · 23/01/2026

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!

0122

Martin Trapp @martr.app · 17/02/2026

==> 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/

Hello, and welcome to Fun with View Transitions!

Embark on a journey into the marvelous land of the View Transition API.

0142

Martin Trapp @martr.app · 16/02/2026

Oh, neat. Waiting for images to render was my first thought. Getting more precise control over when the ::view-transition-new pseudo is captured would be awesome!

000

Martin Trapp @martr.app · 13/02/2026

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

040

Martin Trapp @martr.app · 02/02/2026

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

030

Martin Trapp @martr.app · 28/01/2026

😅 True 🙂 Definitely not the same scale.

100

Martin Trapp @martr.app · 28/01/2026

Danke für den Hinweis auf snapDOM, das kannte ich bisher noch gar nicht. Vielversprechend!