Ar. Li. Posted October 8, 2025 Posted October 8, 2025 https://daygas.gr/ Kindly check my site, I bring in question the horizontal scroll element shown around the middle of the page. If you can kindly check you will see that the horizontal scroll doesn't begin smoothly. here is my code: https://mega.nz/file/DG4CUBxB#2EA2DDggOQ5uPUPrPakQnAgxLmwGCztOYogXfVBaC70 (couldn't post it here or put it in a pen for some reason)
GSAP Helper Posted October 8, 2025 Posted October 8, 2025 Without a minimal demo, it's very difficult to troubleshoot; the issue could be caused by CSS, markup, a third party library, a 3rd party script, etc. Would you please provide a very simple CodePen or Stackblitz that illustrates the issue? Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependencies as possible. Start minimal and then incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, at least we have a reduced test case which greatly increases your chances of getting a relevant answer. See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen. that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: Using a framework/library like React, Vue, Next, etc.? CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import GSAP as shown in the Install Helper in our Learning Center : React (please read this article!) Next Svelte Sveltekit Vue Nuxt Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions. ✅
Rodrigo Posted October 8, 2025 Posted October 8, 2025 Hi, Besides echoing the need of a minimal demo, I noticed that your site has this on the <html> tag <html lang="en-US" class="" style="scroll-behavior: smooth;"> We normally recommend not using scroll-behavior: smooth with ScrollTrigger, what happens is when ScrollTrigger's refresh method is triggered when the browser window is resized, in order to make it's calculations, ScrollTriggers sets the scroll to 0 so every element in the DOM sits in it's natural position. The problem with scroll-behavior: smooth is that this is not immediate, it acts like a transition for the scroll, so when ScrollTrigger makes the calculations after setting the scroll to 0, the scroll position is not actually 0, is more than that so all the calculations are off. Other alternative is that the element being pinned could have an ancestor with a transform applied to it which would create a new stacking context and pinning is not going to work as expected: https://stackoverflow.com/a/15256339/2456879 https://www.joshwcomeau.com/css/stacking-contexts/ What you could try is use pin: "transform" in your ScrollTrigger config and see if that helps. Happy Tweening!
Ar. Li. Posted October 17, 2025 Author Posted October 17, 2025 Greetings, the smooth scroll was removed, i think, but the problem persists. Kindly find codepen below. See the Pen dPGZxKj by ArLi93 (@ArLi93) on CodePen.
Rodrigo Posted October 17, 2025 Posted October 17, 2025 Hi, The pinning in your demo seems to work as expected, I don't see any sudden jumps in it 🤷♂️ This indicates that most likely the issue is elsewhere in your site, perhaps you are creating two ScrollTrigger instances with pin on the same element, or you are not creating the ScrollTrigger instances in the order they appear in the page: https://gsap.com/resources/st-mistakes#creating-scrolltriggers-out-of-order Check all the resources we have in that page and see if that helps. Unfortunately without a minimal demo that clearly illustrates the issue, there is not much we can do. Happy Tweening!
Rodrigo Posted October 17, 2025 Posted October 17, 2025 Hi, Just an FYI, the scroll-behavior: smooth is still there:
Ar. Li. Posted October 20, 2025 Author Posted October 20, 2025 I mean i disabled it and nothing happened. So I enabled it again. Maybe this helps: when editing on elementor, the horizontal scroll starts perfectly.
Rodrigo Posted October 20, 2025 Posted October 20, 2025 4 hours ago, Ar. Li. said: I mean i disabled it and nothing happened. So I enabled it again. Definitely remove that because it will create other issues along the way. We recommend not using that when working with ScrollTrigger. The reason is because when ScrollTrigger calls the refresh method it moves the scroll back to the top in order to make the calculations with every DOM element in it's natural position. The issue is that scroll-behavior: smooth acts like a CSS transition for the scroll position, so when ScrollTrigger sets the scroll to 0 that is not immediate and the scroll position is more than 0, so the calculations are off. AS a result of this you can end up with ScrollTrigger instances that start after they should. Finally, we can't really help without a minimal demo that clearly illustrates the problem and we don't have a way to test your wordpress/elementor environment. What you could try is check if the instances are being created in the right order or perhaps use the sort() method after all the ScrollTrigger instances are created: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort() Happy Tweening!
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