dnnsjsk/glaze

The utility-based animation framework for the web.

glaze's Issues

How do make it so that every element that uses data-animate only starts animating when it is visible in the viewport

What the title says, I want every element that uses data-animate to start animating only when it's visible in the viewport.
As if scrollTrigger.trigger-[&] was on every data-animate element.

Feedback for “ScrollTrigger”

I need help to import the library from a CDN, it is to be used with Javascript, not React
What would be the path?

Breakpoint : Last example has wrong data-animation

Great work! I noticed a minor issue: instead of @md as described in the explanation, the demo is using @lg on line 65 after data-animation. Hope this info would be helpful to ensure consistency.

glaze/docs/pages/documentation/breakpoints.mdx

Lines 64 to 66 in 1c25687

	class="h-20 w-20 rounded-xl bg-orange-500 lg:invisible"
	data-animate="@lg:from:duration-1|autoAlpha-0|rotate-360|xPercent-[-100]|ease-power2.inOut|scrollTrigger.trigger-[&] @lg:from:background-[red]"
	></div>

Feedback for “Install”

Its quite unclear to me (as a noob) how to install glaze.
Should I add a script tag in my HTML file.
What do I do with, and where to put it:

`import gsap from "gsap";
import glaze from "glazejs";
 
// using cdn
// import glaze from "https://esm.sh/glazejs";
// import gsap from "https://esm.sh/gsap";
 
glaze({
  lib: {
    gsap: {
      core: gsap,
    },
  },
});`

Can you please make a more detailed instruction to get it working? I am quite new to all of this. I know the GSAP basics but would like to use glaze