Selectors

By default, Glaze searches for elements with the data-animate attribute and builds the animation based on the value of that attribute. You can change this behavior.

Custom attribute

Use a different data attribute:

glaze({
  lib: { gsap: { core: gsap } },
  dataAttribute: "data-move",
});

Now Glaze will look for data-move instead of data-animate:

<div data-move="from:opacity-0"></div>

Class-based syntax

Prefer classes over data attributes? Enable class mode:

glaze({
  lib: { gsap: { core: gsap } },
  className: "animate",
});

Now you can write animations as classes:

<div class="animate-from:opacity-0|duration-1"></div>

This works well if you're already using utility-first CSS and want your animations to feel similar.