KPC
Kevin Powell - Community•13mo ago
naman

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;
      });
No description
2 Replies
b1mind
b1mind•13mo ago
If your using gsap you should look into using gsap.ScrollTrigger?
naman
namanOP•13mo ago
How do I translate that part into gsap.ScrollTrigger?

Did you find this page helpful?