GSAP Animated Section overlaps on refresh

[gsapnooby]

Here is the link to the website where we are using GSAP with React to build horizontal scroll cards in a section of the website. Everything works fine as expected, but when I scroll to the "Our Services" section and refresh the page, this section overlaps with the one below it. Each section is a React component. What could be the problem? I couldn't figure it out.

My best guess is that the height of the container is set to wrap-content/auto, and since the cards are loaded dynamically, the height might not be calculated properly, resulting in the overlap of the sections.

[GreenSock]

Unfortunately we can't really troubleshoot a live site (way too many factors and impossible to tweak/experiment), but it does look like you're using lazy-loading images which can be problematic. Basically, you need to call ScrollTrigger.refresh() when the layout is done shifting around so that the calculations are correct. You could explicitly set the width/height on your images so that they don't cause layout shifts, or you could use a helper function like the one in this thread: 

 

 

If you still need some help, please make sure you create a minimal demo (like CodePen/Stackblitz) that clearly illustrates the issue and then we'd be happy to look at that and answer any GSAP-related questions.