⭐️Please star to support this work⭐️
🛠 The Utensil Drawer
Utensil Drawer: Pick the tools you need to craft the view transitions you want!
The @vtbag website can be found at https://vtbag.dev/
!!! News !!!
New
collisionBehavior
option tomayStartViewTransition
replaces formerchaining
(experimental, breaking + bug fixing)
For details see https://vtbag.dev/tools/utensil-drawer/
What happened before?
Here are two exciting (still experimental) additions:
- Access morph animation parameters directly in CSS!
You can now access the key parameters of each morph animation in CSS rules! Make them available as CSS pseudo properties on your
::view-transition-group
elements. Calculate animation values based on old and new positions, widths, and heights. Let thevectors
script handle the JavaScript while you create pure CSS styles that go far beyond basic morphs!
- Tiered of checking if
startViewTransition
is supported and whether it wants a function or also accepts the new object with view transitions types? The Drawer now includes the (still experimental)mayStatViewTransition
function:- Works with the new signature in all supported browsers
- Falls back gracefully if view transitions are not natively supported
- 🥁🥁🥁 Optionally prevents killing the current transitions when a new one is started by automatically chaining view transitions 🥁🥁🥁
escapeViewTransitionName()
is a function that escapes your view transition names so you are not stuck with justA-Za-Z0-9-_
characters. "😀"! It's a handy alternative toCSS.escape()
for environments where that's not available.Stable:
declarative-names
allows you to assign view transition names to a set of HTML elements, offering a more reliable and controllable alternative toview-transition-name: auto
that works cross-browser and also for cross-document navigation.
For details see the CHANGELOG
What is it?
The Utensil Drawer holds reusable functions to help you build websites with view transitions. It is a bit sparse right now, but like the one in your kitchen, it is bound to fill up over time.