GSAP Markers on page refresh start in different position

[chrisdb]

When I refresh the page the markers for Scrolltrigger can change their starting position which throws off my pinned background element. If you refresh the page and cache (CTRL + F5) it always loads the marker position correctly but when just refreshing page normally (F5) it sometimes loads the 'start' marker too high which as a result causes my pinned element to overlap the videos and cause my other Scrolltrigger animations to start too early.

 

I have read through the forums and found similar issues and tried adding ScrollTrigger.refresh(); to each animation but this didn't fix the issue. Does anyone have any idea how to resolve this? I have included this on Codepen as an example and it doesn't seem to replicate the issue.

 

 

 

See the Pen poxwmQx by chrisdb (@chrisdb) on CodePen

[GreenSock]

The behavior you're describing sounds a lot like you've got things dynamically loading in AFTER the window's "load" event fires or whenever you're calling ScrollTrigger.refresh(). It's critically important that you do the ScrollTrigger.refresh() after your page layout is done shifting around. For example, let's say you're loading in a big fat jpg image and before it loads your scrollTriggered element is 100px from the top and ScrollTrigger correctly places the marker there...but then your image loads and it's 800px tall and it shoves everything on the page down, so now your element is 900px from the top. If you never tell ScrollTrigger to refresh() accordingly, it'd make sense that the marker would be in the wrong spot. 

 

Do you have any images with loading="lazy" maybe? Or fonts that load in and cause everything to shift after ScrollTrigger has calculated the positions? 

 

It's pretty tough to diagnose blind - we really need to see a minimal demo that clearly illustrates the issue. If you still need help, please be sure to provide one of those. 

 

Thanks for being a Club GreenSock member! 🥳

[huyng]

Hey @chrisdb

 

I also had the exact same problem, and I wonder if you have resolved the issue or not because I managed to resolve the issue for my case. I am not too sure but the cause of the ScrollTrigger position shifting around might be due to poor Cumulative Layout Shift on the page (see here Cumulative Layout Shift). What I have done to resolve it was to set width and height for my images, preload my images in the head element of my html file so the images load in advance to reduce the delay and the layout shifting:

 

<link rel="preload" as="image" href="image-url" />

 

P/S: Really cool website you have there, love the design.