Jump to content
Search Community

Repeated Issue..

janivibe test
Moderator Tag

Go to solution Solved by Rodrigo,

Recommended Posts

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

Link to comment
Share on other sites

  • Solution

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
    .to(photos, { y: `-=${100 * (index + 1)}%`, duration: 1, ease: "none" }); // Move all images upwards
    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:



Hopefully this helps.

Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...