GSAP 3.12.3 and 3.12.4 break ScrollTrigger in latest Chrome

[ynamite]

GSAP 3.12.3 and 3.12.4 break ScrollTrigger in latest Chrome

[jackdoyle]

You said in 3.12.x the images "repeatedly flicker", right? Like back and forth, back and forth (same image)? That sounds quite odd to me and I'd love to explore what's going on in-context. But like you said, that CodePen works great so it's tough to troubleshoot.

I noticed you're animating the very thing that you're using as a trigger which is usually not a good idea because you're moving the very thing whose position is used for the triggering. Typically it's much better to wrap the element and use that wrapper as the trigger (animate the child).

Does the problem only happen at the very end of the page? I see that you're making the element SMALLER which is maybe affecting the overall scrollable area of the page, thus the page ends up scrolling up due to the animation, triggering the ScrollTrigger to reverse, etc.? (A logic issue) I'm completely guessing here, taking shots in the dark since we can't see a minimal demo but maybe this will give you a nudge in the right direction.

I also wonder if it's an issue with dynamically-loading images that are causing the page to reflow, triggering layout updates and resizing(?)

If there's any way to send us a demo that clearly illustrates the issue, that'd be amazingly helpful. Maybe a Stackblitz instead of CodePen? Here's a starter one you can fork: https://stackblitz.com/edit/react-cxv92j

[ynamite]

Thank you Jack, I was able to fix the issue.

The problem was caused by a few things. While the problem did happen with all images, regardless of how far down the images are on the page, it did get increasingly worse the further down the page the images were located, which lead me down the right path. You were right on track with the issue being caused by lazy loading and/or dynamically loading other content (SVGs in my case). By making sure that every image and element had its proper dimensions or aspect ratios before initializing Scroll Trigger, I was able to get rid of the problem entirely.

By the way, in the real life example I'm not animating the element which is also the trigger, in the code pen I just simplified the example a little too much.

It's strange though that this problem occurred so prominently in newer GSAP versions. But yeah, thanks a lot.

One more thing, why do you prefer Stackblitz over Codepen nowadays?

[jackdoyle]

Thanks for getting back to us with your results/solution. Like you, I am also curious about why older versions seemed to work better for you but that's difficult for me to explore without a minimal demo that clearly illustrates the issue. If you're ever able to isolate things in a minimal demo I'd be happy to take a peek.

Oh, and we don't favor Stackblitz over Codepen (quite the opposite actually) - it's just that some people find CodePen challenging when they're using a framework like React, Vue, Next.js, etc. or if they've got a setup that requires multiple files or compile steps so I was just offering Stackblitz in case that was easier for you.

[ynamite]

No problem! :)

I believe the main issue was that the flickering images (the ones I wanted to animate with Scroll Trigger) had no intrinsic width/height on page load/when initializing ScrollTrigger (due to lazy loading). So the flickering might have happened because to ScrollTrigger the start and end values of the image were very close to each other, due to the low height (maybe even zero height?).
Additionally, there were other images above and below those images, that also didn't have their dimensions properly set. As for why it worked in earlier GSAP versions I don't know.

I'll see if I can whip up a demo that illustrates the problem clearly in the coming days.