Repeated Issue..

[janivibe]

Hello everyone, I hope you're all doing well. I've created an animation using GSAP, but I'm facing an issue that I can't seem to understand. The animation works perfectly as I want it to, but there's a problem. The animation keeps restarting repeatedly. For example, if the 4th h1 is triggered, the 4th image appears, but after the 4th h1 is triggered, the first image appears first, followed by images from the first to the 4th. And when scrolling up, only the first image is shown. I want the image to change along with h1. If it's the 5th h1, then only the 5th image should be shown. However, I'm unable to fix this. If anyone can fix it, I would be very grateful.

See the Pen GRaJgWr by janivibe (@janivibe) on CodePen.

[Rodrigo]

Hi @janivibe and welcome to the GSAP Forums!

 

Maybe something like this:

See the Pen yLWNyZr by GreenSock (@GreenSock) on CodePen.

 

Is important to know that the issue is here:

details.forEach((detail, index) => {
  let headline = detail.querySelector("h1");
  let animation = gsap
    .timeline()
    .to(photos, { y: `-=${100 * (index + 1)}%`, duration: 1, ease: "none" }); // Move all images upwards
  ScrollTrigger.create({
    trigger: headline,
    start: "top 60%",
    end: "top 60%",
    animation: animation,
    scrub: 1,
    snap: 1 / photos.length,
    ease: "none",
    toggleActions: "restart restart restart none"
  });
});

You are creating a timeline for all the images that takes the images from y 0 to the percentage value of each index, that's why everytime you passed the start point the images were set back to y 0 again. Instead of using toggleActions in this case is better to just use the onEnter/EnterBack callbacks:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/?page=1#onEnter

 

Hopefully this helps.

Happy Tweening!