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=0110
Was this page helpful?