@vtbag/utensil-drawer
Version:
Pull out just what you need to craft seamless transitions. 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.
42 lines (23 loc) • 2.58 kB
Markdown
[⭐️Please star to support this work⭐️](https://github.com/vtbag/utensil-drawer)
# 🛠 The Utensil Drawer
Utensil Drawer: Pick the tools you need to craft the view transitions you want!
[](https://www.npmjs.com/package/@vtbag/utensil-drawer)
[](https://www.npmjs.com/package/@vtbag/utensil-drawer)
The @vtbag website can be found at https://vtbag.dev/
## !!! News !!!
> 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 the `vectors` 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 🥁🥁🥁
For details see https://vtbag.dev/tools/utensil-drawer/
## What happened before?
> `escapeViewTransitionName()` is a function that escapes your view transition names so you are not stuck with just `A-Za-Z0-9-_` characters. "😀"! It's a handy alternative to `CSS.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 to `view-transition-name: auto` that works cross-browser and also for cross-document navigation.
For details see the [CHANGELOG](https://github.com/vtbag/utensil-drawer/blob/main/CHANGELOG.md)
## 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.