GSAP ScrollTrigger is not working [SOLVED]

[old shard]

So previously I have asked about a library to animate objects when in screen, and @plucky dome recommended GSAP (Thank you very much, this is exactly what I was looking for). #1246110172401893438 message

But now when I tried using it, making a code exactly from https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1 , the animation did not work when using scrollTrigger.

This code below works, the box moves:

      import gsap from "gsap";
      
      gsap.to(".box", {
        x: 500,
        rotation: 360,
        duration: 3
      })

But when I tried to implement scrollTrigger as the code below:

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

      gsap.to(".box", {
        scrollTrigger: {
                trigger: '.box',
                start: "top 80%",
                end: "bottom top",
                markers: true,
                toggleActions: "restart pause restart pause",
            },
        x: 500,
        rotation: 360,
        duration: 3
      })

It is now not moving at all, and it is not showing the UI markers like the picture:

Anyone have an idea? Thank you

[white crow]

Not sure if this would apply to your problem but here's an article showing common mistakes when using ScrollTrigger: https://gsap.com/resources/st-mistakes/

[old shard]

Hi Yonic, apparently that was not it

[old shard]

okay nvm, so I had to import { ScrollTrigger } from "gsap/ScrollTrigger"; for it to work lol

GSAP ScrollTrigger is not working [SOLVED]

[hot cave]

@old shard How did you do that... Please. I am facing similar issues.

[old shard]

add brackets to ScrollTrigger

import { ScrollTrigger } from "gsap/ScrollTrigger";

[hot cave]

added.. Still not working.. No <viewtransition> proerty added