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.