gn90

Oh wow this works just perfectly. Thanks a ton! Appreciate your help and sorry for the misunderstanding

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}`,

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

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

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

Ohh ok thanks for the clarifications on this. Yeah my Safari is below 15.4. If it works on yours (and all newer versions) then im more than happy. Thanks both of you guys!

Thanks akapowl! sadly that didn't fixed the problem. I will create a minimal demo tomorrow and post it here.

Oh wow normalizeScroll works perfect for the overscrolling. But i have a really weird bug since i built it into my page (just in Safari on a Mac). I have a fixed sidebar (navigation) and now when i scroll the page the sidebar is flickering like hell. i already found out that this flickering is only on pages where i have scrolltrigger contentanimations where i animate elements from y:100% or y:-100% to 0. When the animations are done the flickering gets not that bad (but still sometimes on scroll it flickers) Is this a common problem and is there a way to fix this? (i uploaded the testpage: https://www.edgeobject.com/gsap_test/) Regarding to "remove scrollbar": thank you i will have a look at it

Hi there, i don't know if this is the right place to ask those questions. I came across this page which is also made with GSAP https://www.sixsocks.studio/en I built a similar horizontal page with Scrolltrigger. But I struggle with 2 problems (which this site mangaged to fix) - Get rid off the overscrolling on Mac and iOS (especially when u reach the end of a webpage) - Remove the Scrollbar (even on Windows). Thanks in advance, Gui

thank you both of u guys! will take a look on both solutions and will try my best to implement it to my page. Appreciate your help!

Sry to bother you again. I tried it out right now but when i try to scroll to the side it does and immediately jumps back.

Ohh ok that was the problem. Thank you for your quick help. So i will just remove the overflow hidden on mobile. thanks!

Oh sry i meant the "handling" to drag the screen to the side and not up/down. so its more intuitive. So if the user scrolls sideways it will acually scroll. Thanks, Gui

Hi again, just wanted to ask if there are any solutions to get a horizontal Scrolltrigger to work on mobile? Or are there any good concepts on how to approach this? Haven't found something in the forums about this. I am not an javascript pro so i hope there is some easy going solution for this. Thanks in advance, Gui

ohh wow thank you! you are awesome. thanks for the help!