chrisdb Posted April 28, 2023 Posted April 28, 2023 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. Untitled.mp4 See the Pen poxwmQx by chrisdb (@chrisdb) on CodePen.
GreenSock Posted April 28, 2023 Posted April 28, 2023 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! ?
By Huy Posted June 8, 2023 Posted June 8, 2023 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. 2
Barbie Posted October 20, 2024 Posted October 20, 2024 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). Hope this may help someone! 2
Rodrigo Posted October 21, 2024 Posted October 21, 2024 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! 1
Grentastic Posted January 12 Posted January 12 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). 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.
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