Defaults

Set default animation values that apply to all elements or all timelines.

Setup

glaze({
  lib: { gsap: { core: gsap } },
  defaults: {
    tl: "defaults:ease-power2.inOut scrollTrigger.trigger-[&]",
    element: "duration-1",
  },
});

Timeline defaults

The tl default applies to every timeline:

defaults: {
  tl: "defaults:ease-power2.inOut scrollTrigger.trigger-[&]",
}

Now every element with a timeline will automatically:

• Use power2.inOut easing
• Trigger its animation when scrolled into view

Element defaults

The element default applies to every animated element:

defaults: {
  element: "duration-1",
}

Now every animation defaults to 1 second unless overridden.

How it works

Glaze creates a timeline for each element internally, even if you don't explicitly use tl. This means tl defaults effectively apply to everything - useful for setting up global ScrollTrigger behavior or easing.

You can always override defaults on individual elements:

<!-- Uses the default 1s duration -->
<div data-animate="from:opacity-0"></div>

<!-- Overrides to 0.5s -->
<div data-animate="from:opacity-0|duration-0.5"></div>