Jump to content
Search Community

Horizontal scroll section how to slow scrolltrigger

Samsky test
Moderator Tag

Go to solution Solved by ZachSaucier,

Recommended Posts

Hi Gsap, I hope you're doing well.

 

I'm trying to make this section scroll slower just as locomotive scroll does.  to control the scrolling speed I mean.

I have tried few things like ease or duration,. Yeah i'm a total noob I know,  your help will be greatly appreciated.

 

Thanks 

 

 

Samsky 

Still learning Vanilla js total newbie.

See the Pen PozvMav by SamShalby (@SamShalby) on CodePen

Link to comment
Share on other sites

Hey Samsky. The main issue here is your repeat: -1 on the tween. It isn't technically infinite, it's a very large number. So when you apply it to the tween that has a ScrollTrigger with scrub, ScrollTrigger tries to scrub through all of those repeats, hence the very fast speed. Remove that and it will function like you want it to.

 

With that being said, you should handle resizing by making some of your properties functional values and set invalidateOnRefresh: true like so:

See the Pen YzWoPvO?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi Zack sorry I have another question, 

 

After I finished working on this same project that is both using scrollTrigger and Locomotive-scroll,

 Locomotive doesn't animate anything on mobile devices, is there  a solution with scrollTrigger instead? 

 

As you will see in my pen that I integrated both libraries as suggest by green sock. 

I know this is a locomotive-scroll issue but maybe you know anyone who had the same problem ?  

 

Link to comment
Share on other sites

13 minutes ago, ZachSaucier said:

What specifically isn't working? The smooth scrolling? Are you aware of Locomotive's smoothMobile option? 

The smooth scrolling is working fine. for example if i'm using parallax to animate an element or horizontally animate it, it ain't working on mobile.

I'm not aware of the mobile option. Could you plz post an example ?

Link to comment
Share on other sites

  • 1 year later...
On 11/20/2020 at 4:08 PM, ZachSaucier said:

Hey Samsky. The main issue here is your repeat: -1 on the tween. It isn't technically infinite, it's a very large number. So when you apply it to the tween that has a ScrollTrigger with scrub, ScrollTrigger tries to scrub through all of those repeats, hence the very fast speed. Remove that and it will function like you want it to.

 

With that being said, you should handle resizing by making some of your properties functional values and set invalidateOnRefresh: true like so:

 

Thank you so much for this help!!

On 11/20/2020 at 4:08 PM, ZachSaucier said:

 

 

 

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