Presets
You can create presets for your animations to apply the same settings to multiple elements. This is useful when you want consistent animations across your site.
Setup
Define presets in your config:
glaze({
lib: { gsap: { core: gsap } },
presets: {
fadeIn: "from:opacity-0|duration-1",
slideUp: "from:y-50|opacity-0|duration-0.5",
helicopter: "from:rotate-2160|duration-5",
},
});Usage
Reference presets with preset-:
<div data-animate="preset-fadeIn"></div>
<div data-animate="preset-slideUp"></div>
<div data-animate="preset-helicopter"></div>With classes
If you're using class-based syntax:
<div class="animate-preset-helicopter h-20 w-20 rounded-xl bg-amber-500"></div>Combining presets
You can use presets alongside other animation strings:
<div data-animate="preset-fadeIn scrollTrigger.trigger-[&]"></div>Presets are just shortcuts - they expand into the full animation string before Glaze processes them.