gn90 Posted April 26, 2022 Share Posted April 26, 2022 Hi, i don't know if this belongs here but i have a strange behaviour on my site. I made a horizontal scroll website with ScrollTrigger. The (sub)pages have different lengths/widths but everything uses the same JS. If I scroll once with the mouse, you jump different distances depending on the length of the page. I really don't know how to fix this. Is there any parameter i could use to handle this? I don't have a Codepen link due the fact u cant have 2 different pages. I can post the link to my testserver with the actual page if this is allowed. But this is my ScrollTrigger code: ScrollTrigger.matchMedia({ "(min-width: 992px)": function () { ScrollTrigger.normalizeScroll(true); } }); const getMaxWidth = () => { maxWidth = 0; sections.forEach((section) => { maxWidth += section.offsetWidth; }); }; const setupScrollTrigger = () => { ScrollTrigger.matchMedia({ "(min-width: 992px)": function () { sections = gsap.utils.toArray("section"); getMaxWidth(); ScrollTrigger.addEventListener("refreshInit", getMaxWidth); scrollTween = gsap.to(sections, { x: () => `-${maxWidth - window.innerWidth}`, ease: "none", scrollTrigger: { trigger: ".wrapper", pin: true, scrub: 0.5, end: () => `+=${maxWidth/3}`, invalidateOnRefresh: true } }); } }); } Thanks in advance Gui Link to comment Share on other sites More sharing options...
OSUblake Posted April 27, 2022 Share Posted April 27, 2022 Hi gn90, It's really hard to answer ScrollTrigger questions without a minimal demo. You can have multiple pages as you want on CodeSandbox. If you're just doing vanilla JavaScript, meaning no framework, you can use HTML5 static template. https://codesandbox.io/ 1 Link to comment Share on other sites More sharing options...
gn90 Posted April 27, 2022 Author Share Posted April 27, 2022 Hi Thank you for the link. I created a demo of the 2 pages: https://codesandbox.io/s/magical-jackson-8fsy6n?file=/test.html index.html is the "short" page and test.html the "longer". If you just scroll once with the mouse on both sites you can clearly see that on test.html it jumps way further than on index.html because the page itself is longer. Btw i have a mediaQuery on this testpage. Viewport width should be 992px+ Thanks in advance Link to comment Share on other sites More sharing options...
OSUblake Posted April 27, 2022 Share Posted April 27, 2022 I looked at your demo, but I'm not sure what you're asking. 4 hours ago, gn90 said: index.html is the "short" page and test.html the "longer". If you just scroll once with the mouse on both sites you can clearly see that on test.html it jumps way further than on index.html because the page itself is longer. What are you expecting to happen, or what do you think should happen when you saying this? Everything looks fine to me. The horizontal animations are matched up with the scrollbar position. 1 Link to comment Share on other sites More sharing options...
gn90 Posted April 27, 2022 Author Share Posted April 27, 2022 Hi sry its bit hard for me to explain because i am not an english native speaker. I will try it with some screenshots. Its not about the animation or anything else. It's just about the distance when u scroll When i scroll on my mousewheel just "one" step/click the viewport jumps a bit -> thats a normal behaviour. The thing I don't understand is that depending on the "pagesize" (how long the page is) the jump is different. As you can see on the screenshots i attached the page with less content has a smaller "jump" than the one with more content when i scroll the mousewheel just one step. Is it more clear what I mean? Thanks in advance, Gui Link to comment Share on other sites More sharing options...
OSUblake Posted April 27, 2022 Share Posted April 27, 2022 I'm not seeing anything unusual about it. If you want the second one to move at the same speed as the first one, then you'd need to increase the second ScrollTrigger's end value. 1 Link to comment Share on other sites More sharing options...
gn90 Posted April 27, 2022 Author Share Posted April 27, 2022 Ohh ok this is the scrollspeed and its based on the end value. That makes sense thank you. But how do i do this when both use the same Scrolltrigger functionality? Is there a way to make the scrollspeed the same? I have this value of an example and i thought this needed for the horizontal ScrollTrigger to work. end: () => `+=${maxWidth / 3}`, Link to comment Share on other sites More sharing options...
Solution OSUblake Posted April 27, 2022 Solution Share Posted April 27, 2022 You'd have to normalize the end values based on some constant that you like. let scrollSpeed = 3500; And then something like this should give you constant speed. end: () => `+=${scrollSpeed * (maxWidth - window.innerWidth) / scrollSpeed }` 2 Link to comment Share on other sites More sharing options...
gn90 Posted April 27, 2022 Author Share Posted April 27, 2022 Oh wow this works just perfectly. Thanks a ton! Appreciate your help and sorry for the misunderstanding 2 Link to comment Share on other sites More sharing options...
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