Horizontal scrollTrigger and locomotive Scroll

[furley 0 Likes (Newbie)]

Hi I'm trying to do horizontal scrolling whilst use locomotive scroll  to slow down the scrolling also I notice there is an issue when using a fixed header the logo moves up slightly once they have reached the bottom the scroll.

 

How do you use locomotive with gasp going horizontally every time I think I'm getting close I end up scrolling diagonally down and to the right rather then just scrolling sideways. I have seen a-lot on here going vertically but can't find any horizontal example.

 

I also wanted to slow it down presumably I can with locomotive?

 

Any ideas would be greatly appreciated.  

See the Pen bGBoxjo by sfurley (@sfurley) on CodePen

[ZachSaucier 7,123 Likes (Superhero)]

Hey furley and welcome to the GreenSock forums.

 

I think it would benefit you greatly to slow down a bit and understand what is happening in the example scrollerProxy demos. 

 

For example, in your code you are attempting to use .smooth-scroll as a target for the scrolling but you don't have an element with that class. You're also not telling ScrollTrigger to use that as your scroller. It looks like you should use .wrapper as that element in your demo. 

 

After doing that and making some minor adjustments to the CSS, I got this:

See the Pen JjbrwyV?editors=0100 by GreenSock (@GreenSock) on CodePen

[kobracode 0 Likes (Newbie)]

On 2/22/2021 at 8:38 PM, ZachSaucier said:

Hey furley and welcome to the GreenSock forums.

 

I think it would benefit you greatly to slow down a bit and understand what is happening in the example scrollerProxy demos. 

 

For example, in your code you are attempting to use .smooth-scroll as a target for the scrolling but you don't have an element with that class. You're also not telling ScrollTrigger to use that as your scroller. It looks like you should use .wrapper as that element in your demo. 

 

After doing that and making some minor adjustments to the CSS, I got this:

 

 

Hello, is there any way to reduce speed on the horizontal scroll section?

Regards,

D

[GreenSock 18,228 Likes (Superhero)]

5 hours ago, kobracode said:

Hello, is there any way to reduce speed on the horizontal scroll section?

Sure! Just shorten the "end" value: 

end: () => "+=" + (container.offsetWidth / 4)

Or just hard-code it to a specific number like end: "+=500".