Jump to content
Search Community

ScrollTrigger & Locomotive Scroll - horizontal

Timobee test
Moderator Tag

Go to solution Solved by akapowl,

Recommended Posts

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

  • Solution

 

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 :) 

 

  • Like 3
Link to comment
Share on other sites

@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

 

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

 

 

  • Like 3
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...