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 View Transitions | 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 View Transitions | 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!
Great article, especially for guiding people through their first steps. It clearly and simply covers everything that really matters.
Quick heads-up: some code blocks look a bit odd because parts of the formatting were rendered as code.
Quick heads-up: some code blocks look a bit odd because parts of the formatting were rendered as code.
February 3, 2026 at 7:21 AM
Great article, especially for guiding people through their first steps. It clearly and simply covers everything that really matters.
Quick heads-up: some code blocks look a bit odd because parts of the formatting were rendered as code.
Quick heads-up: some code blocks look a bit odd because parts of the formatting were rendered as code.
If you have written experimental code that uses the provisional `contain: view-transition` syntax, now might be a good time to switch.
February 2, 2026 at 2:32 PM
If you have written experimental code that uses the provisional `contain: view-transition` syntax, now might be a good time to switch.
As always also covered in "test your own browser", which also includes the link to the most current spec draft.
Test Your Browser's View Transition Capabilities
Check what part of the View Transition API is supported by your browser
vtbag.dev
February 2, 2026 at 2:32 PM
As always also covered in "test your own browser", which also includes the link to the most current spec draft.
View Transition API:
There is a new kid on the block! ๐
Meet the new `view-transition-scope` property and discover how it helps you avoid name clashes with scoped view transitions.
It gives you a clean way to manage transition names and keeps nested transitions from stepping on each other.
There is a new kid on the block! ๐
Meet the new `view-transition-scope` property and discover how it helps you avoid name clashes with scoped view transitions.
It gives you a clean way to manage transition names and keeps nested transitions from stepping on each other.
View Transition JavaScript API
How to interact with view transitions using JavaScript
vtbag.dev
February 2, 2026 at 2:32 PM
View Transition API:
There is a new kid on the block! ๐
Meet the new `view-transition-scope` property and discover how it helps you avoid name clashes with scoped view transitions.
It gives you a clean way to manage transition names and keeps nested transitions from stepping on each other.
There is a new kid on the block! ๐
Meet the new `view-transition-scope` property and discover how it helps you avoid name clashes with scoped view transitions.
It gives you a clean way to manage transition names and keeps nested transitions from stepping on each other.
Looks really good, even includes the theme toggle ๐
January 31, 2026 at 9:30 PM
Looks really good, even includes the theme toggle ๐
Astro's ClientRouter can persist elements and an carry them over to the new page.
January 26, 2026 at 5:12 PM
Astro's ClientRouter can persist elements and an carry them over to the new page.
Cross-document view transitions for the win!
Firefox, come join the fun!
Firefox, come join the fun!
I was lucky to be a privileged tester of @codepen.io 2.0, and now they have released the Private Beta.
codepen.io/beta
It's finally time to unleash some cool "View Transition" demos because with the 2.0 version, we can have many pages in one pen ๐
Kudos to @chriscoyier.net and the entire team!
codepen.io/beta
It's finally time to unleash some cool "View Transition" demos because with the 2.0 version, we can have many pages in one pen ๐
Kudos to @chriscoyier.net and the entire team!
January 26, 2026 at 12:31 PM
Cross-document view transitions for the win!
Firefox, come join the fun!
Firefox, come join the fun!
Make that :: a *:: to also kill element scoped view transitions.
January 22, 2026 at 8:57 AM
Make that :: a *:: to also kill element scoped view transitions.
Yep, respecting reduced motion preferences is exactly what a responsible web developer should do!
Ladies and Gentlemen, Start Your Engines!
How to enable browser-native cross-document view transitions on your multi-page site.
vtbag.dev
January 22, 2026 at 8:51 AM
Yep, respecting reduced motion preferences is exactly what a responsible web developer should do!
Disabling view transitions can never be important!
January 22, 2026 at 8:42 AM
Disabling view transitions can never be important!
So you came here even though YOU HATE VIEW TRANSITIONS? But no worries, I got you covered.
Probably the most compact way to disable view transitions globally:
::view-transition { display: none }.
Drop this into your user stylesheet and never be bothered by View Transition API animations again.
Probably the most compact way to disable view transitions globally:
::view-transition { display: none }.
Drop this into your user stylesheet and never be bothered by View Transition API animations again.
January 22, 2026 at 8:30 AM
So you came here even though YOU HATE VIEW TRANSITIONS? But no worries, I got you covered.
Probably the most compact way to disable view transitions globally:
::view-transition { display: none }.
Drop this into your user stylesheet and never be bothered by View Transition API animations again.
Probably the most compact way to disable view transitions globally:
::view-transition { display: none }.
Drop this into your user stylesheet and never be bothered by View Transition API animations again.
Sounds great! If you want a helping hand, I would be more than happy to support!
January 21, 2026 at 1:59 PM
Sounds great! If you want a helping hand, I would be more than happy to support!
There is also tooling that greatly simplifies state transfer across view transitions for media playback, CSS transitions, form content, scroll position, svg animations...
The Element Crossing
@vtbag/element-crossing allows you carry over state to the next page when using cross-document view transitions
vtbag.dev
January 21, 2026 at 1:01 PM
There is also tooling that greatly simplifies state transfer across view transitions for media playback, CSS transitions, form content, scroll position, svg animations...
Reposted by Bag of Tricks for View Transitions
View Transition Types are newly baseline! These make it easier to build transitions that are specific to particular situations.
Also, we have some new View Transition DevTools in Firefox 147โฆ
Also, we have some new View Transition DevTools in Firefox 147โฆ
January 19, 2026 at 2:13 PM
View Transition Types are newly baseline! These make it easier to build transitions that are specific to particular situations.
Also, we have some new View Transition DevTools in Firefox 147โฆ
Also, we have some new View Transition DevTools in Firefox 147โฆ
Sehr cool!
View transitions are always fun!
View transitions are always fun!
January 17, 2026 at 1:51 PM
Sehr cool!
View transitions are always fun!
View transitions are always fun!
View transitions are always fun!
January 14, 2026 at 4:22 PM
View transitions are always fun!
ICYMI: Firefox now shows the tree of pseudo-elements in devtools during view transitions:
January 14, 2026 at 7:38 AM
ICYMI: Firefox now shows the tree of pseudo-elements in devtools during view transitions:
@bram.us, www.bram.us/2025/10/17/v... needs an update ;-)
January 13, 2026 at 2:47 PM
@bram.us, www.bram.us/2025/10/17/v... needs an update ;-)
... there are still plenty of browsers out there that support the View Transition API without supporting view transition types. If you want to use view transition types across browsers, take a look at the polyfill in the bag of tricks.
The Utensil Drawer
A growing collection of lightweight utilities to help you craft polished view transitions.
vtbag.dev
January 13, 2026 at 2:36 PM
... there are still plenty of browsers out there that support the View Transition API without supporting view transition types. If you want to use view transition types across browsers, take a look at the polyfill in the bag of tricks.
View transition types landed in Firefox 147. See it for yourself at vtbag.dev/basics/test-...
BUT DO NOT FORGET ... (continued below)
BUT DO NOT FORGET ... (continued below)
January 13, 2026 at 2:36 PM
View transition types landed in Firefox 147. See it for yourself at vtbag.dev/basics/test-...
BUT DO NOT FORGET ... (continued below)
BUT DO NOT FORGET ... (continued below)
Chris and Dave talk about :active-view-transition-type() at 55:33, and it is a lot of fun to hear them brainstorm all the cool things you can do with view transitions.
697: Web Install API, Resizing Text, Active View Transitionย Type
We're talking new stuff (to us) that we haven't chatted about yet like display:grid-lanes, the web install API, resizing text on the web, scroll triggered animations, active view transition type, and a Quick Look at CodePen v2โฆ
We're talking new stuff (to us) that we haven't chatted about yet like display:grid-lanes, the web install API, resizing text on the web, scroll triggered animations, active view transition type, and a Quick Look at CodePen v2โฆ
697: Web Install API, Resizing Text, Active View Transitionย Type
We're talking new stuff (to us) that we haven't chatted about yet like display:grid-lanes, the web install API, resizing text on the web, scroll triggered animations, active view transition type, and a Quick Look at CodePen v2 features.
shoptalkshow.com
January 12, 2026 at 12:07 PM
Chris and Dave talk about :active-view-transition-type() at 55:33, and it is a lot of fun to hear them brainstorm all the cool things you can do with view transitions.
Reposted by Bag of Tricks for View Transitions
January 9, 2026 at 5:47 PM
Reposted by Bag of Tricks for View Transitions
