gsap scrollTrigger animation

44 Views Asked by At

The gallery is written in scrollTrigger gsap. I want to get this result: https://tanyatimal.studio/portraits/hypnomoves-maria. Everything works, but if you scroll several times, it creates a lot of scrollTrigger. Here is the code:

  const panels = gsap.utils.toArray(".gallery__item");
  let panelsContainer = document.querySelector(".gallery__wrap");
  let prevSectionIndex = -1;

  // Function to animate a specific panel
  function animatePanel(panelIndex) {
    gsap.to(panels[panelIndex], {
      scale: 0.7,
      scrollTrigger: {
        trigger: panels[panelIndex + 1],
        start: "top top",
        scrub: 1,
        markers: 1,
      },
    });
    console.log("animate " + panelIndex);
  }

  let tween = gsap.to(panels, {
    xPercent: -100 * (panels.length - 1),
    ease: "none",
    scrollTrigger: {
      trigger: ".gallery__wrap",
      pin: true,
      start: "top top",
      scrub: 1,
      onUpdate: (self) => {
        const progress = self.progress;
        const sectionIndex = Math.round(progress * (panels.length - 1));
        if (sectionIndex !== prevSectionIndex) {
          //console.log(sectionIndex);

          animatePanel(sectionIndex - 1);

          prevSectionIndex = sectionIndex;
        }
      },
      end: () => "+=" + (panelsContainer.offsetWidth - innerWidth),
    },
  });
<div class="gallery__wrap">
        <div class="gallery__item">
          <img src="images/01hero.jpg" alt="" />
        </div>
        <div class="gallery__item">
          <img src="images/02hero.jpg" alt="" />
        </div>
        <div class="gallery__item">
          <img src="images/03hero.jpg" alt="" />
        </div>
        <div class="gallery__item">
          <img src="images/04hero.jpg" alt="" />
        </div>
        <div class="gallery__item">
          <img src="images/05hero.jpg" alt="" />
        </div>
        <div class="gallery__item">
          <img src="images/06hero.jpg" alt="" />
        </div>
      </div>


this is now
after scrolling

I can't understand what the problem is. I have tried many things, but I want to solve it using gsap. thanks for any help.

0

There are 0 best solutions below