Scroll reactive marquee made using GSAP not working

I am trying to create a scroll marquee, but the string does not repeat until it exits the viewport

let currentScroll = 0;
      let isScrollingDown = true;
      let tween = gsap.to(".marquee__part", {
        xPercent: -100,
        repeat: -1,
        duration: 35,
        ease: "linear",
      }).totalProgress(0.7);
      gsap.set("marquee__inner", {
        xPercent: -50
      });
      window.addEventListener("scroll", function() {
        if (window.pageYOffset > currentScroll) {
          isScrollingDown = true;
        } else {
          isScrollingDown = false;
        }
        gsap.to(tween, {
          timeScale: isScrollingDown ? 1 : -1,
        });
        currentScroll = window.pageYOffset;
      });

let currentScroll = 0;
      let isScrollingDown = true;
      let tween = gsap.to(".marquee__part", {
        xPercent: -100,
        repeat: -1,
        duration: 35,
        ease: "linear",
      }).totalProgress(0.7);
      gsap.set("marquee__inner", {
        xPercent: -50
      });
      window.addEventListener("scroll", function() {
        if (window.pageYOffset > currentScroll) {
          isScrollingDown = true;
        } else {
          isScrollingDown = false;
        }
        gsap.to(tween, {
          timeScale: isScrollingDown ? 1 : -1,
        });
        currentScroll = window.pageYOffset;
      });

2 Replies

b1mind•11mo ago

If your using gsap you should look into using gsap.ScrollTrigger?

namanOP•11mo ago

How do I translate that part into gsap.ScrollTrigger?

Gaming

Programming

Scroll reactive marquee made using GSAP not working