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!

Thank you for your reply. It works waay better now due to this function. But still not perfect. Could it be because of my fixed navigation on the left thats overlapping? Is there a way to include this in the calculations? Thank you, Gui https://codepen.io/gn90at/pen/KKZBprM

Hi there, so i am quite new to the GSAP community but so far i created a few, cool small things. Since yesterday i struggle with the scrollto functionality. I discovered in other posts of this forum how to do it (also with a fixed navigation on the left side). In every section i have some "prev" and "next" buttons. As u can see it always scrolls to the end of the page if u click them. I am not really that good in plain javascript so its quite hard for me to understand the target calculation i copied from another post. I just thought it would be enough to set the element as target. But i guess since we are in a horizontal scrolltrigger it handles it different. Thanks in advance, Gui

Ohh ok even the gsap animations. thank you for your help!

Oh one more thing to the main problem: I have a small Tween Animation that works fine. gsap.to(".ball", { y: -120, backgroundColor: "#1e90ff", ease: "none", scrollTrigger: { trigger: ".sec-md-vid", containerAnimation: scrollTween, start: "left center", toggleActions: "play none none none" } }); But as soon as i switch to the other page and come back afterwards the animation doesnt trigger anymore. But i re-created the scrollTween variable again. Do i need to call something else?

perfect thank you this helped me a lot! for the other problem i will create a demo and open a new thread.

Hi there, thank you for your help. I got most of it to work now thanks to you. The "kill" functionality was the part missing. I only have one problem i can't seem to fix. Everything works fine when i stay in place and navigate to another place. But as soon as i scroll and then try to navigate my scrollcontainer is completely broken after the transition. i tried this: async enter(data) { animLoaderOut(); // hide page transition window.scrollTo(0, 0); }, But it does not scroll back to the "top" (left) position of the new page. Does window.scrollTo() do not work inside a horizontal ScrollTrigger? You can see it here (btw thanks for the link): https://stackblitz.com/edit/web-platform-xainhm?file=assets/js/master.js To your second answer regarding the animation: Yeah i already did a animation with the containerAnimation. The thing i don't understand is which trigger i should use when the element (that needs to be animated) is already in the viewport when the page loads. In this case its the "connecting people" text which already has a animation when the page loads but needs a second when the page scrolls. Thank you, Guillermo

Hi, i am quite new to GSAP but i love it so far. I build a small horizontal scrolling dummy where everything works fine. My page transitions are made with the help of barba.js. But as soon my new content is loaded my Scrolltrigger breaks and now it scrolls vertically. I tried to call the getMaxWidth function and initiate the ScrollTween again as soon the new content is loaded but now its not scrolling in any direction. Is there any solution to recreate the Scrolltrigger when a new page is loaded? The page transition in codepen doesnt work because i cant create a second page. (enter function of barba where i try to initiate the gsap stuff again is on line 102) And another question down the line: Is it possible to animate the whole text (like a fadeout) as soon as i scroll to the right side and fade it in as soon as i come back? maybe the opacity based on the scrollposition. Thanks in advanced, Guillermo