Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
furley

Horizontal scrollTrigger and locomotive Scroll

Recommended Posts

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

Link to comment
Share on other sites

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

  • Like 1
Link to comment
Share on other sites

  • 7 months later...
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

Link to comment
Share on other sites

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"

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.
×