Jump to content
Search Community

GSAP Markers on page refresh start in different position

chrisdb
Moderator Tag

Recommended Posts

Posted

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.

Posted

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! ?

  • 1 month later...
Posted

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.

 

  • Like 2
  • 1 year later...
Posted

Hello, I found this older thread when desperately looking for solution for identical issue with pinned ScrollTriggers as OP.
After hours and hours of debugging, transferring code to codepen and reworking all animations...the problem was with CSS scroll-behavior: smooth. 

I found it in documentation for ScrollTo plugin, even though I wasn't using that one, I thought it won't hurt to try. And issue was magically resolved :)

 

Wish it was also included with ScrollTrigger documentation since it really does affect it (at least when it comes to pinning).

image.thumb.png.5246224a0f35b1c48a2d17c178b2c7b4.png

Hope this may help someone! :)

  • Thanks 2
Posted

Hi @Barbie and welcome to the GSAP Forums!

 

Yeah indeed the scroll-behavior: smooth issue, is a known one. The reason is that scroll-behavior: smooth to the HTML tag by default which interferes with the way ScrollTrigger works. That will definitely create a problem when you resize the browser window/tab, since ScrollTrigger scrolls everything to the top in order to run it's calculations again, this is completely necessary and not a problem actually, because we need everything to be at it's natural position in order to calculate the start and end points accurately. The problem with scroll-behavior: smooth is that it creates some sort of transition for the scrolling, so when ScrollTrigger sets the scroll position to 0 it takes sometime to get there and when ScrollTrigger does all the calculations again the current position of the scroll is not 0, so all the calculations are off.

 

We'll look into adding this in our documentation in order to have that resource available for our users, thanks for pointing that out! 👍

 

Happy Tweening!

  • Like 1
  • 2 months later...
Grentastic
Posted
On 10/20/2024 at 3:49 PM, Barbie said:

Hello, I found this older thread when desperately looking for solution for identical issue with pinned ScrollTriggers as OP.
After hours and hours of debugging, transferring code to codepen and reworking all animations...the problem was with CSS scroll-behavior: smooth. 

I found it in documentation for ScrollTo plugin, even though I wasn't using that one, I thought it won't hurt to try. And issue was magically resolved :)

 

Wish it was also included with ScrollTrigger documentation since it really does affect it (at least when it comes to pinning).

image.thumb.png.5246224a0f35b1c48a2d17c178b2c7b4.png

Hope this may help someone! :)

@Barbie Thank you! I was pulling my hair out over this. I also wasted hours trying to debug the issue, and was on the verge of scrapping the plugin altogether, when I happened upon your suggestion.

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...