I am a newbie to GSAP animation library. and I have a small issue to use it on my landing pages.

https://drive.google.com/file/d/15RwlGz9zfjE65VxbMa-eKUqGawVK3aPQ/view?usp=sharing

ScrollTrigger has an issue while I visit different pages. I am using gsap in b2b page. it works well after I refresh this page. but normally user visit Home first and then come to this b2b page and the scrolltrigger works not correctly as you can see my video. I am so stuck with this issue.

  const [step, setStep] = useState(0);
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const numImages = products.length;

    const tl = gsap.from(".b2b .product", {
      scrollTrigger: {
        trigger: ".layout-paragraph.product .layout-title .sub-title",
        start: "top top",
        end: () => `+=${numImages * 120}%`,
        scrub: true,
        pin: ".landing-layout.container.b2b",
        onUpdate: (self) => {
          setStep(Math.floor(self.progress * numImages));
          setProgress(Math.floor(self.progress * numImages * 100));
        },
        onLeave: () => {
          setStep(numImages - 1);
        },
        onLeaveBack: () => {
          setStep(0);
        },
      },
      ease: "none",
    });
    return () => {
      tl?.kill();
    }
  }, []);

What do I make a mistake as you guess? Any help would be great.