Locomotive Scroll & ScrollTrigger

[lucasdesign]

Hi, I need help with the scrolltrigger, I made a horizontal scroll website with the help of Locomotive Scroll, I need to use the scrolltrigger but I don't know how to set it up. My goal is to be able to add animations when I scroll to some section (for example, in the second section I want the image to be displayed only when I'm halfway through the second section), is it possible to do this?

 

I found something similar, but it's vertical scroll and I need horizontal 

See the Pen zYrELYe by GreenSock (@GreenSock) on CodePen

[Rodrigo]

Hi,

 

Here is an example using Locomotive and ScrollTrigger in a horizontal setup:

See the Pen JjbrwyV by GreenSock (@GreenSock) on CodePen

 

Is worth noticing that Locomotive is not a GSAP product and we can't give you a lot of support for issues regarding it, since we need to keep the forums focused on GSAP related questions. You can look into GSAP ScrollSmoother plugin in order to see an alternative for it.

 

Happy Tweening!

[akapowl]

 

Hello @lucasdesign

 

Although it is great that you included a demo, unfortunately it is not exactly minimal, which makes it very hard to help.

Also you are not including your CSS directly in the codepen, which again makes it a lot harder to help.

 

There is a demo for the usage of locomotive-scroll alongside ScrollTrigger on the docs-page for .scrollerProxy(), which you will need to hook up ScrollTrigger to locomotive-scroll in the first place - you will need to stick to the order of succession in your JS as it is shown in that demo for hooking them up.

 

For it to work with a horizontal-scrolling locomotive-scroll driven page you will also need to adjust the values the scrollerProxy gets and sets to the horizontal equivalents of those you can see in the demo on that page, AND you will need to set horizontal to true on your ScrollTriggers.

 

Some other sidenotes to things I noticed within your demo:

• you shouldn't be trying to use both ScrollSmoother and locomotive-scroll together - that will produce huge conflicts, as they both will try to smoothen the scroll in a similar way (although they might be working a bit different)
• locomotive-scroll's data-scroll-section attribute will in the vast majority of cases not work alongside ScrollTrigger, due to how it makes the smooth-scroll work, so I'd advise against using it on your page if you want to use ScrollTrigger
• since you appear to want to use different setups for different screen-widths, you should have a look at gsap.matchMedia() which should help a lot with that.

 

Here is an older example of mine for a scenario as such to possibly help you get started. Although it works, I can and will not guarantee that it is 100% correct with regard to how to set up locomotive-scroll. Also, especially the horizontal version of locomtive-scroll comes with quite some bugs and quirks that you can not really expect support for here, since locomotive-scroll is not a GreenSock product as Rodrigo already mentioned above. Maybe this will help though.
 

See the Pen 87ad10833ca73c5a1ea59190fae48e32 by akapowl (@akapowl) on CodePen