ScrollTrigger Items on resize layout to the center

[Lenspre]

Something wrong with titles on resize. Please see sample:

 

See the Pen zYbgLLL by Lenspre (@Lenspre) on CodePen

[Rodrigo]

Hi,

 

Sorry about the delay in answering 🙏

 

This boils down mostly to overcomplicating this quite a bit IMHO, the logic you're using right now is probably creating conflicting tweens and/or ScrollTrigger instances. This can be done far simpler as far as I can tell:

const sections = gsap.utils.toArray(".section");
const titles = gsap.utils.toArray(".title-wrapper");

// Initial position for all but the first title
gsap.set(titles, {
  yPercent: (i) => i ? 100 : 0,
});

const tl = gsap.timeline({
  repeat: -1,
});

titles.forEach((title, i) => {
  if (i) {
    const section = sections[i - 1];
    console.log("not first & not last", i);
    gsap.timeline({
      scrollTrigger: {
        trigger: section,
        start: "clamp(bottom center)",
        end: "bottom top",
        scrub: true,
        markers: { indent: 150 * i },
        id: i + 1,
      }
    })
      .to(titles[i - 1], { yPercent: -100 })
      .to(title, { yPercent: 0 }, "+=0.5");
  }
});

Here is a fork of your demo:

See the Pen yLrBzwY by GreenSock (@GreenSock) on CodePen

 

Hopefully this helps.

Happy Tweening!