janivibe Posted May 13 Share Posted May 13 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 More sharing options...
Solution Rodrigo Posted May 13 Solution Share Posted May 13 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! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now