Skip to content

Latest commit

 

History

History
40 lines (33 loc) · 1.29 KB

scrolltrigger.mdx

File metadata and controls

40 lines (33 loc) · 1.29 KB
Raw

import Example from "../../components/Example";

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 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>
{`
`}