My horizontal scroll is working when I make changes to the code but upon refreshing the page the horizontal scroll stops working. Also sometimes it works.

[Sreehari Adiyodi]

I 've been trying to solve this for days seeing the community and referring topics here in GSAP and tried various method but still could not solve this issue. As you can see from the code there are three div's and the second div has some content and I need to make one of the div's in it scroll horizontally while scrolling vertically. I have pinned the second div inorder to complete the horizontal scroll. It works sometime when I make corrections on the code and hit save. But when I refresh the page it stops working all the same. Also sometimes it works only when the cursor is on the left most side the horizontal scroll works. Any suggestions / help ? I have provided the codesandbox link for the same.

 

https://codesandbox.io/p/sandbox/horizontal-scroll-q55rs3

See the Pen horizontal-scroll-q55rs3 by p (@p) on CodePen.

[Rodrigo]

Hi @Sreehari Adiyodi and welcome to the GSAP Forums!

 

Simple mistake, you have your constant creating an array outside the useGSAP hook, so that code is executed before the DOM is rendered, so GSAP doesn't find anything with that selector so naturally it returns an empty array:

// Runs before the DOM is rendered
const components = gsap.utils.toArray("#component");

useGSAP(() => {
  console.log(components);
  gsap.set(components, {
    xPercent: 0,
  });

  gsap.to(components, {
    xPercent: -100 * (components.length - 1),
    // translateX:"-400vw",
    ease: "none",

    scrollTrigger: {
      trigger: ".third-1",
      start: "top top",
      pin: true,
      scrub: true,
      // snap:1/(components.length-1),
      end: "+=2000px",
      markers: true,
    },
  });
});

Just move that inside the useGSAP hook and it works the way you expect:

useGSAP(() => {
  const components = gsap.utils.toArray("#component");
  console.log(components);
  gsap.set(components, {
    xPercent: 0,
  });

  gsap.to(components, {
    xPercent: -100 * (components.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".third-1",
      start: "top top",
      pin: true,
      scrub: true,
      end: "+=2000px",
      markers: true,
    },
  });
});

The reason why this works when you do changes in your code is because the HMR (hot module replacement) doesn't re-renders the DOM so when that runs at that point the elements are actually in the DOM.

 

Hopefully this helps

Happy Tweening!

[Sreehari Adiyodi]

Thank you @Rodrigo. It helped.

I am a beginner in GSAP still figuring it out.  Sorry for the delayed response.