🍩  Glaze

Defaults

You can create presets for your animations by using the defaults object. This is useful when you want to apply the same settings to multiple animations.

Setup

glaze({
  presets: {
    helicopter: "from:rotate-2160|duration-5",
  },
});

Usage

<div
  class="h-20 w-20 rounded-xl bg-amber-500"
  data-animate="preset-helicopter"
></div>

Or when using classes:

<div class="animate-preset-helicopter h-20 w-20 rounded-xl bg-amber-500"></div>
Edit on GitHub

Previous

Defaults

Next

Changelog

On this page