Timobee Posted February 28, 2021 Share Posted February 28, 2021 Hi, I was wondering how do I implement GSAP ScrollTrigger into a Locomotive Scroll that has the direction set to horizontal? Is this even possible or do I need to implement horizontal scrolling with GSAP? like in this demo (https://codepen.io/cameronknight/pen/qBNvrRQ) The CodePen preview isn’t working correctly. Here is the direct link to the pen: https://codepen.io/Pullapooh/pen/VwmMRJR See the Pen VwmMRJR by Pullapooh (@Pullapooh) on CodePen Link to comment Share on other sites More sharing options...
Solution akapowl Posted February 28, 2021 Solution Share Posted February 28, 2021 Hey @Timobee - welcome to the forums. Looks like you've already got everything correct in your demo for the ScrollerProxy. To get it working with Locomotive scroll in the first place though, you'd have to set the scroller on your ScrollTrigger. Then simply just add horizontal: true to it and you should be good to go. You can now even use left and right as values for your start and end. These are the additions/changes I made on your ScrollTrigger - the changes on start and end (and the added toggleActions) are just for demonstration purposes; you can of course change them to whatever you like. scroller: '.smoothScroll', horizontal: true, start: "left center", end: "left left", See the Pen d33d2a26fdb45b3efda5fe55ba1ca8b3 by akapowl (@akapowl) on CodePen Happy scroll-triggering 3 Link to comment Share on other sites More sharing options...
Timobee Posted February 28, 2021 Author Share Posted February 28, 2021 @akapowl That worked great and solved the problem. I didn’t know that ScrollTrigger accepted a horizontal: true parameter! Thanks I was just wondering how would I fix the ScrollTrigger triggers if ScrollTrigger/GSAP handles the horizontal scrolling? + Is there any reason for using one method before the other? Is one method more performant for example? Made a new demo on CodePen where ScrollTrigger/GSAP handles the horizontal scrolling: See the Pen vYyRZod by Pullapooh (@Pullapooh) on CodePen Link to comment Share on other sites More sharing options...
akapowl Posted February 28, 2021 Share Posted February 28, 2021 Before I address your questions: You forgot to incorporate two essential lines of code for things to work properly at the very end of your demo // each time the window updates, we should refresh ScrollTrigger and then update LocomotiveScroll. ScrollTrigger.addEventListener("refresh", () => locoScroll.update()); // after everything is set up, refresh() ScrollTrigger and update LocomotiveScroll because padding may have been added for pinning, etc. ScrollTrigger.refresh(); And I also added .smoothScroll { overflow: hidden !important; } to your CSS - so the default browser scroll-bar won't appear. See the Pen eda7311e61bbba7679b4584f96571916 by akapowl (@akapowl) on CodePen 56 minutes ago, Timobee said: I was just wondering how would I fix the ScrollTrigger triggers if ScrollTrigger/GSAP handles the horizontal scrolling? + Is there any reason for using one method before the other? Is one method more performant for example? Just to be clear - technically GSAP doesn't handle the horizontal scrolling there. You are merely just tweening the container to the left on vertical scroll. As for the reasons to use one over the other; I guess in the end it comes down to how exactly you want the user experience to be and what fits best in your project. I can not tell you much about performance on this, sorry. You might have to wait for somebody else to chime in to get an answer on that. What I can tell you though is that since when using this method you are actually just faking the horizontal scroll, you'd have to do some calculations yourself for detecting when whatever element you want to address gets to the point where you'd want it to be animated. This demo from the demo section shows how you could to that See the Pen ZEpNLZa by GreenSock (@GreenSock) on CodePen And this thread here contains a lengthy and detailed explanation about why and how you would have to consider an offset for your calculations in a scenario like yours 3 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