Samsky Posted November 20, 2020 Share Posted November 20, 2020 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 More sharing options...
ZachSaucier Posted November 20, 2020 Share Posted November 20, 2020 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 1 1 Link to comment Share on other sites More sharing options...
Samsky Posted November 20, 2020 Author Share Posted November 20, 2020 Smooth works well, Thank you Zach. Oh and greetings to Jack Link to comment Share on other sites More sharing options...
Samsky Posted November 21, 2020 Author Share Posted November 21, 2020 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 More sharing options...
ZachSaucier Posted November 21, 2020 Share Posted November 21, 2020 1 hour ago, Samsky said: Locomotive doesn't animate anything on mobile devices What specifically isn't working? The smooth scrolling? Are you aware of Locomotive's smoothMobile option? Link to comment Share on other sites More sharing options...
Samsky Posted November 21, 2020 Author Share Posted November 21, 2020 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 More sharing options...
Solution ZachSaucier Posted November 21, 2020 Solution Share Posted November 21, 2020 smoothMobile: true just makes smooth mobile browsers apply smooth scrolling. If you're having issues please create a minimal demo of the issue and clearly describe what's not working. 1 Link to comment Share on other sites More sharing options...
Cristiano Di Marco Posted August 13, 2022 Share Posted August 13, 2022 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 More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now