View transition durations
Anyone here have decent experience with view transitions?
I'm wondering if, you have a long transition on the root, that it won't block all interaction even when shorter groups run?
I found a work around using custom properties, where all the view transitions use a
--vt-speed custom prop for their duration, and then when different functions are used to trigger specific view transitions, that function sets the custom property to the desired speed, but it feels like there should be a better way?
If it's all kinda confusing, I made a video explaining the issue with a demo 😅
https://youtu.be/h71tY66w7f8
Codepen with the issue: https://codepen.io/kevinpowell/pen/GgpPMxw/f710269f3fab248def5d83849a94f29f
Codepen with the fix: https://codepen.io/kevinpowell/pen/PwPXJLv/e9dd611fe001eae69ced7d556e91dd35?editors=01102 Replies
I have not really experimented with view transistions, but, from what I can see, the page takes the longest defined * view-transition form all those defined. I don't think that it is even root related as I tested it on a separate element within the page and had the same result, the page was "blocked" for the longest duration defined.
*[edit] - rather it is running all the view-transitions defined, so blocking the page until the longest one finishes as they are all part of the global view-transition timeline.
You could set, and then remove, the view-transition property via JS but that is basically the same (and more complicated) as your custom property method
I have just read the reply that you had on bsky using "guarded" view transistions, thats very interesting!
Thanks for mentioning it, I'll put the thread here for anyone who stumbles into the same issue 🙂 - https://bsky.app/profile/kevinpowell.co/post/3lxxbpr64uk2z