ScrollTrigger

There is no special syntax needed to use ScrollTrigger with Glaze. Since it is defined inside the scrollTrigger property of the animation object, dot notation can be used to adjust its settings.

Setup

First, register ScrollTrigger with GSAP:

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

Then initialize Glaze as usual.

Usage

Add scrollTrigger.* properties to your animation:

<div
  data-animate="from:opacity-0|y-50|scrollTrigger.trigger-[&]"
></div>

The [&] means "use this element as the trigger" (same as the & in selectors).

Common options

<div
  data-animate="from:opacity-0|y-50|scrollTrigger.trigger-[&]|scrollTrigger.start-[top_center]|scrollTrigger.end-[bottom_top]|scrollTrigger.scrub-true"
></div>

Remember to use underscores instead of spaces in values: [top_center] not [top center].