ScrollTrigger

ScrollTrigger needs to be registered with GSAP before it can be used. This can be done by importing it from the gsap package and calling registerPlugin with it.

import gsap from "gsap";
import ScrollTrigger from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

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

<div class="flex h-[50vh] items-center">
  <div
    class="h-20 w-20 rounded-xl bg-amber-500 sm:invisible"
    data-animate="from:autoAlpha-0|rotate-180|y-50|scrollTrigger.trigger-[&]|boxShadow-[0_0_100px_20px_orange]|scrollTrigger.scrub-true|scrollTrigger.start-[top_center]|scrollTrigger.end-[-=200]"
  ></div>
</div>

Timelines Defaults