@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
Think same document view transitions are supported everywhere?
Think again.
Some older browser versions only support the Level 1 API, or not even that. Bramus's library lets you code against the Level 2 API regardless of native support,...
...much like the Bag's mayStartViewTransition():
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
fun-with-view-transitions.pages.dev/episode/7/page
(set view transition type to "...with vectors")
So cool to see such a detailed behind-the-scenes look from someone whose work I really admire!
Here are two more demos with swooping transitions that use the image-pair pseudo for the composition instead of the approach described in the article above.
MPA View Transitions FTW!
Surely there’s something we can do. 🙃
Playing around with scoped view transitions on @codepen.io
codepen.io/g12n/pen/RNR...
If you want, you can delay the start of cross-document view transitions by blocking the renderer until the custom elements are defined.
Then the last frame you see is the previous page. After the renderer resumes, the next frame shows the loading page with defined custom elements.
If you want, you can delay the start of cross-document view transitions by blocking the renderer until the custom elements are defined.
Then the last frame you see is the previous page. After the renderer resumes, the next frame shows the loading page with defined custom elements.
What kind of regression did you encounter? It’s a bit tricky to make out from the video.
I am genuinely confident that Firefox will soon support cross document view transitions. That will make an enormous difference to overall compatibility.
Then it will also soon be possible to detect forward and backward directions without the History or Navigation API.
I am genuinely confident that Firefox will soon support cross document view transitions. That will make an enormous difference to overall compatibility.
Then it will also soon be possible to detect forward and backward directions without the History or Navigation API.
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.
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.
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.
Looks really good, even includes the theme toggle 😉
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!
Make that :: a *:: to also kill element scoped view transitions.
Yep, respecting reduced motion preferences is exactly what a responsible web developer should do!
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.
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...
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…
Sehr cool!
View transitions are always fun!
