Install

npm i glazejs

yarn add glazejs

pnpm add glazejs

bun add glazejs

Setup

Import GSAP and Glaze, then initialize:

import gsap from "gsap";
import glaze from "glazejs";

glaze({
  lib: {
    gsap: {
      core: gsap,
    },
  },
});

That's the minimum setup. Glaze will now find all elements with data-animate attributes and animate them.

CDN

You can also use ES modules from a CDN:

import glaze from "https://esm.sh/glazejs";
import gsap from "https://esm.sh/gsap";

glaze({
  lib: { gsap: { core: gsap } },
});

Configuration

Glaze accepts a few options:

glaze({
  lib: { gsap: { core: gsap } },

  // Search within a specific element (default: document)
  element: document.querySelector("#app"),

  // Use a different attribute (default: "data-animate")
  dataAttribute: "data-move",

  // Define responsive breakpoints
  breakpoints: {
    default: "(min-width: 1px)",
    sm: "(min-width: 640px)",
    lg: "(min-width: 1024px)",
  },

  // Default animation settings
  defaults: {
    tl: "ease-power2.inOut",
    element: "duration-1",
  },

  // Reusable animation presets
  presets: {
    fadeIn: "from:opacity-0|duration-1",
    slideUp: "from:y-50|opacity-0",
  },

  // Watch for DOM changes and re-animate (default: false)
  watch: { debounceTime: 500 },
});

Most of these are optional - the only required option is lib.gsap.core.

Install

Setup

CDN

Configuration

On this page