Bag of Tricks for View Transitions
@vtbag.dev
The 👜 Bag of Tricks ✨ for View Transitions | https://vtbag.dev
The 👜 Bag of Tricks ✨ for Astro's Client Router | https://events-3bg.pages.dev
Tools, Info, Tips & Tricks
Enhance Your Development Skills with the View Transition API
The 👜 Bag of Tricks ✨ for Astro's Client Router | https://events-3bg.pages.dev
Tools, Info, Tips & Tricks
Enhance Your Development Skills with the View Transition API
Pinned
@vtbag
Bag of Tricks for View Transitions.
vtbag.dev
Hi friends!
Just moved to our new home at vtbag.dev!
Follow The Bag to catch the next cool tricks we’ll pull out!
Just moved to our new home at vtbag.dev!
Follow The Bag to catch the next cool tricks we’ll pull out!
Reposted by Bag of Tricks for View Transitions
November 14, 2025 at 8:38 PM
Reposted by Bag of Tricks for View Transitions
Now part of Baseline, the view-transition-class property simplifies styling → goo.gle/42KlzLc
With this new addition you can: ✔️ Apply styles to multiple elements ✔️ Keep your CSS cleaner ✔️ Streamline complex animations
With this new addition you can: ✔️ Apply styles to multiple elements ✔️ Keep your CSS cleaner ✔️ Streamline complex animations
November 13, 2025 at 10:00 PM
Now part of Baseline, the view-transition-class property simplifies styling → goo.gle/42KlzLc
With this new addition you can: ✔️ Apply styles to multiple elements ✔️ Keep your CSS cleaner ✔️ Streamline complex animations
With this new addition you can: ✔️ Apply styles to multiple elements ✔️ Keep your CSS cleaner ✔️ Streamline complex animations
Really nice CodePen @highflyer910.bsky.social ! 👋
I might add z-index: 1 to ::view-transition-group(nav) and leave it off page-header and hero, but that is just a personal preference 🙂
I might add z-index: 1 to ::view-transition-group(nav) and leave it off page-header and hero, but that is just a personal preference 🙂
Smooth Page Transitions with Zero Libraries: The View Transitions API https://cstu.io/6f7479 #india #engineer #computerscience
Smooth Page Transitions with Zero Libraries: The View Transitions API
I recently started using the View Transitions API in one of my projects, and honestly, it felt like...
cstu.io
November 11, 2025 at 2:19 PM
Really nice CodePen @highflyer910.bsky.social ! 👋
I might add z-index: 1 to ::view-transition-group(nav) and leave it off page-header and hero, but that is just a personal preference 🙂
I might add z-index: 1 to ::view-transition-group(nav) and leave it off page-header and hero, but that is just a personal preference 🙂
Speaking of ⏪turn signals⏩:
This thing can make your view transition setup a lot simpler when it comes to controlling the direction of cross-document view transitions.
vtbag.dev/tools/turn-s...
This thing can make your view transition setup a lot simpler when it comes to controlling the direction of cross-document view transitions.
vtbag.dev/tools/turn-s...
November 8, 2025 at 10:49 AM
Speaking of ⏪turn signals⏩:
This thing can make your view transition setup a lot simpler when it comes to controlling the direction of cross-document view transitions.
vtbag.dev/tools/turn-s...
This thing can make your view transition setup a lot simpler when it comes to controlling the direction of cross-document view transitions.
vtbag.dev/tools/turn-s...
Reposted by Bag of Tricks for View Transitions
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...
Some practical examples of view transitions to elevate your UI
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
November 6, 2025 at 12:30 PM
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
Reposted by Bag of Tricks for View Transitions
#Development #Guides
View Transition API · Ways to create smooth, instant page transitions ilo.im/16844p by Brad Woods
_____
#ModernCSS #ViewTransitions #Animations #WebPages #API #Browser #WebDev #Frontend #CSS #JavaScript
View Transition API · Ways to create smooth, instant page transitions ilo.im/16844p by Brad Woods
_____
#ModernCSS #ViewTransitions #Animations #WebPages #API #Browser #WebDev #Frontend #CSS #JavaScript
Brad Woods Digital Garden
Notes about creative coding on the Web.
ilo.im
November 3, 2025 at 10:00 PM
#Development #Guides
View Transition API · Ways to create smooth, instant page transitions ilo.im/16844p by Brad Woods
_____
#ModernCSS #ViewTransitions #Animations #WebPages #API #Browser #WebDev #Frontend #CSS #JavaScript
View Transition API · Ways to create smooth, instant page transitions ilo.im/16844p by Brad Woods
_____
#ModernCSS #ViewTransitions #Animations #WebPages #API #Browser #WebDev #Frontend #CSS #JavaScript
Reposted by Bag of Tricks for View Transitions
Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.
piccalil.li/blog/start-i...
piccalil.li/blog/start-i...
Start implementing view transitions on your websites today
Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.
piccalil.li
October 28, 2025 at 12:01 PM
Browser support for view transitions is rocketing and there's not many better out there to help you understand how to implement them than Cyd Stumpel.
piccalil.li/blog/start-i...
piccalil.li/blog/start-i...
Reposted by Bag of Tricks for View Transitions
We're currently working on devtools for view transitions in Firefox, but in the meantime, here's a little-known option that helps…
October 20, 2025 at 2:28 PM
We're currently working on devtools for view transitions in Firefox, but in the meantime, here's a little-known option that helps…
How on earth did that happen?! 😱🙈
Scoped view transitions officially made it into the spec and I managed to miss it for three whole weeks? Unbelievable!
- Element.prototype.startViewTransition()
- new transitionRoot property
+ view transition name isolation with contain: view-transition
Scoped view transitions officially made it into the spec and I managed to miss it for three whole weeks? Unbelievable!
- Element.prototype.startViewTransition()
- new transitionRoot property
+ view transition name isolation with contain: view-transition
CSS View Transitions Module Level 2
drafts.csswg.org
October 19, 2025 at 11:13 PM
How on earth did that happen?! 😱🙈
Scoped view transitions officially made it into the spec and I managed to miss it for three whole weeks? Unbelievable!
- Element.prototype.startViewTransition()
- new transitionRoot property
+ view transition name isolation with contain: view-transition
Scoped view transitions officially made it into the spec and I managed to miss it for three whole weeks? Unbelievable!
- Element.prototype.startViewTransition()
- new transitionRoot property
+ view transition name isolation with contain: view-transition
Ever wanted to keep a view transition going until some other activity finishes? You could add an artificial animation to a pseudo-element and remove it when your activity ends.
Or you can now use the brand-new waitUntil() function on the view transition object to pass a promise to wait for!
Or you can now use the brand-new waitUntil() function on the view transition object to pass a promise to wait for!
The View Transition API
Basics information about the View Transition browser API
vtbag.dev
October 19, 2025 at 10:59 PM
Ever wanted to keep a view transition going until some other activity finishes? You could add an artificial animation to a pseudo-element and remove it when your activity ends.
Or you can now use the brand-new waitUntil() function on the view transition object to pass a promise to wait for!
Or you can now use the brand-new waitUntil() function on the view transition object to pass a promise to wait for!
Reposted by Bag of Tricks for View Transitions
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?
Yes, once you get used to Level 2 of the View Transition API, you might miss a few things. But @firefox.com did a great job by adding some Level 2 features: match-element for auto-generated view transition names, the view-transition-class CSS property, and the :active-view-transition pseudo-class.
Do not be too harsh. It is easy to polyfill the Level 2 signature. Even view transition types can be polyfilled.
Let’s hope Level 2 makes it onto the to-do list soon.
Let’s hope Level 2 makes it onto the to-do list soon.
API Levels and Implications
What are those levels of the View Transition API, and what does that mean for me as a dev?
vtbag.dev
October 14, 2025 at 11:22 PM
Yes, once you get used to Level 2 of the View Transition API, you might miss a few things. But @firefox.com did a great job by adding some Level 2 features: match-element for auto-generated view transition names, the view-transition-class CSS property, and the :active-view-transition pseudo-class.
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.
On a final glance at my ranking, I couldn’t help but notice it’s definitely leaning a bit in one direction.
October 10, 2025 at 4:54 AM
On a final glance at my ranking, I couldn’t help but notice it’s definitely leaning a bit in one direction.
Reposted by Bag of Tricks for View Transitions
A lot has happened since Chrome shipped Same-Document View Transitions in 2023.
In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support.
And this year … well, I wrote a post summing it all up.
In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support.
And this year … well, I wrote a post summing it all up.
What's new in view transitions (2025 update) | Blog | Chrome for Developers
An overview of what changed for View Transitions in 2025
developer.chrome.com
October 8, 2025 at 11:31 AM
A lot has happened since Chrome shipped Same-Document View Transitions in 2023.
In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support.
And this year … well, I wrote a post summing it all up.
In 2024 we shipped Cross-Document VTs, added refinements such as `view-transition-class` and VT Types, and also welcomed Safari in adding VT support.
And this year … well, I wrote a post summing it all up.
Did you know that the View Transition API not only copies border properties from the named element to the ::view-transition-group-children pseudo-element, it also animates them?
It's so new, it's not even spec'd yet.
So might be subject to change.
As always, you can find the details in The Bag.
It's so new, it's not even spec'd yet.
So might be subject to change.
As always, you can find the details in The Bag.
Styling View Transitions
Styling view transitions including :active-view-transition-type and view-transition-class
vtbag.dev
October 6, 2025 at 3:26 PM
Did you know that the View Transition API not only copies border properties from the named element to the ::view-transition-group-children pseudo-element, it also animates them?
It's so new, it's not even spec'd yet.
So might be subject to change.
As always, you can find the details in The Bag.
It's so new, it's not even spec'd yet.
So might be subject to change.
As always, you can find the details in The Bag.
Quick heads-up for anyone trying this and running into trouble: Scoped view transitions (currently only supported in Chrome nightly behind the 'Experimental Web Platform features' flag) do work inside a shadow DOM for the most part, except for the tiny detail that they do not produce any animations.
October 2, 2025 at 10:32 AM
Quick heads-up for anyone trying this and running into trouble: Scoped view transitions (currently only supported in Chrome nightly behind the 'Experimental Web Platform features' flag) do work inside a shadow DOM for the most part, except for the tiny detail that they do not produce any animations.
This may not be obvious: setting the view-transition-name CSS property on an element creates a backdrop root, establishes a stacking context, and flattens its children in 3D space, see the reply from @zubiden.bsky.social for a pointer to the spec.
Obscure CSS edge case of the week: `view-transition-name` will “contain” any `backdrop-filters` of its children. The filters will not "see" anything beyond the element with `view-transition-name`. Only happens in Chromium and Webkit. codepen.io/jonikorpi/pe...
view-transition-name contains backdrop-filter
...
codepen.io
September 27, 2025 at 5:12 PM
This may not be obvious: setting the view-transition-name CSS property on an element creates a backdrop root, establishes a stacking context, and flattens its children in 3D space, see the reply from @zubiden.bsky.social for a pointer to the spec.
Stay informed and decide wisely.
September 23, 2025 at 9:12 AM
Stay informed and decide wisely.
See Bramus' information about nested view transition groups and this little demo on how to utilize ::view-transition-group-children to let the list items slide behind the border and even behind the scrollbar!
September 23, 2025 at 5:28 AM
See Bramus' information about nested view transition groups and this little demo on how to utilize ::view-transition-group-children to let the list items slide behind the border and even behind the scrollbar!
Two phase cross-document means you start an animation into a preview, then continue to the final page once enough of its content is ready.
That is, if I got it right, @nomster.bsky.social.
That is, if I got it right, @nomster.bsky.social.
Blink: Intent to Prototype: Two-phase cross-document view transition
Blink: Intent to Prototype: Two-phase cross-document view transition
Blink: Intent to Prototype: Two-phase cross-document view transition
groups.google.com
September 18, 2025 at 12:41 PM
Two phase cross-document means you start an animation into a preview, then continue to the final page once enough of its content is ready.
That is, if I got it right, @nomster.bsky.social.
That is, if I got it right, @nomster.bsky.social.
Reposted by Bag of Tricks for View Transitions
And for y’all using Astro’s client router: this means that you will be the first showing cross-document view transitions in Firefox even before those get native support!
As soon as a browser has minimal view transition support, the client router will use that instead of the fallback simulation.
As soon as a browser has minimal view transition support, the client router will use that instead of the fallback simulation.
September 17, 2025 at 6:44 AM
And for y’all using Astro’s client router: this means that you will be the first showing cross-document view transitions in Firefox even before those get native support!
As soon as a browser has minimal view transition support, the client router will use that instead of the fallback simulation.
As soon as a browser has minimal view transition support, the client router will use that instead of the fallback simulation.
Thank you for sharing, @fry69.dev!
FYI: With Firefox 143 (just released) it is possible to enable some basic view transition support with setting
dom.viewTransitions.enabled -> true
in about:config
This will be the default in Firefox 144 (Oct), so some basic view transition support will be available across all major browsers soon!
dom.viewTransitions.enabled -> true
in about:config
This will be the default in Firefox 144 (Oct), so some basic view transition support will be available across all major browsers soon!
September 17, 2025 at 6:30 AM
Thank you for sharing, @fry69.dev!
Safari Technology Preview 227 supports Navigation API and document.activeViewTransition now gives access to (shuffles notes) … the active view transition (if there is an active one)
September 12, 2025 at 7:20 PM
Safari Technology Preview 227 supports Navigation API and document.activeViewTransition now gives access to (shuffles notes) … the active view transition (if there is an active one)
Reposted by Bag of Tricks for View Transitions
Hi @kevinpowell.co 👋,
yes, "normal" view transitions are document global. All groups defined in the DOM will run when the view transition starts.
That gives you two options:
a) use scoped view transitions
b) guard your view transition names and switch those off, you want to suppress.
yes, "normal" view transitions are document global. All groups defined in the DOM will run when the view transition starts.
That gives you two options:
a) use scoped view transitions
b) guard your view transition names and switch those off, you want to suppress.
September 3, 2025 at 6:52 PM
Hi @kevinpowell.co 👋,
yes, "normal" view transitions are document global. All groups defined in the DOM will run when the view transition starts.
That gives you two options:
a) use scoped view transitions
b) guard your view transition names and switch those off, you want to suppress.
yes, "normal" view transitions are document global. All groups defined in the DOM will run when the view transition starts.
That gives you two options:
a) use scoped view transitions
b) guard your view transition names and switch those off, you want to suppress.