Documentation
Presets

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>
DefaultsChangelog