Jump to content
GreenSock

james12345

ScrollSmoother velocity / speed

Go to solution Solved by james12345,

Recommended Posts

Hi guys,

Great job on the ScrollSmoother, really loving it. So simple to use and integrates perfectly into everything else. 

I'm trying to get a similar scroll effect to whats featured on this site https://www.exoape.com/ . It feels really responsive and quick, but has a nice glide / ease & velocity to the ease out.  I've been playing around with the smooth & ease but neither seem to come close as I don't want it take longer to catch up (I don't think), almost add a velocity or something. Unless there's a sweet point with timings and eases?

Any points in the right direction would be massively appreciated!
Cheers!

See the Pen mdXPQMe by jamesstudiothis (@jamesstudiothis) on CodePen

Link to comment
Share on other sites

Hey!

 

I think some of the 'speediness' is that elements in the background are moving faster than the scroll speed.

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



Maybe an expo ease too?

Link to comment
Share on other sites

Thanks Cassie, really appreciate the help! It seems like it's getting there and that's a point in the right direction, however it seems you 'loose' that speediness scrolling in-between sections when data-speed is applied to their children? I think ideally of this to work fully, it would this need to be applied to the sections itself? Or all children of #smooth-content itself? 

See the Pen mdXPQMe by jamesstudiothis (@jamesstudiothis) on CodePen



Thanks again

Link to comment
Share on other sites

Sure! If that works for you. Just make sure you're not nesting effects.

 

(You shouldn't have elements with data speed on inside other elements with data speed on)

Link to comment
Share on other sites

Ahh I see. That could be an issue then actually and this might not work. Would this be the only way to add that 'speediness' to the scroll, rather than it feeling a little heavy / sluggish? 

I know something like asscroll has something similar to the feeling I want:
https://codepen.io/ashthornton/pen/pobJRQX?editors=1010

Maybe even Locomotive too. I just really appreciate the seamless integration with the rest of the GSAP plugins, along with the data-speed and data-lag, so if there was a way to keep it all working 'in house' and get a similar speed & ease, that would be amazing. 

Thanks again

  • Like 1
Link to comment
Share on other sites

This is probably one for @GreenSock then!

  • Like 1
Link to comment
Share on other sites

No worries Cassie, appreciate the help 🙂

Link to comment
Share on other sites

13 hours ago, james12345 said:

Would this be the only way to add that 'speediness' to the scroll, rather than it feeling a little heavy / sluggish? 

I'm struggling to understand the goal here or what the problem is. You can control the overall amount of time it takes to "catch up" using the "smooth" value (as you know) and ALSO control the easing of that catch-up using "ease". I'm not sure what else you want control of or why those don't appear to be giving you want you want - those two values let you do almost anything. 

 

So if it's taking too long to catch up, just reduce the "smooth" number and/or make the ease more extreme. Expo is probably the most extreme standard ease, but you could use a CustomEase that's even more extreme like: 

https://greensock.com/docs/v3/Eases?CustomEase=M0,0 C0.03,0.57 0.056,0.762 0.142,0.864 0.242,0.982 0.226,1 1,1 

 

Or maybe I'm just misunderstanding?

Link to comment
Share on other sites

  • Solution

Hi Jack, thanks for getting back to me.

Yeah, I know what you mean, that's why I was thinking the same and wasn't sure if I was missing anything. It was actually the normalizeScroll and setting this to true. In Chrome this changes the scroll 'speed' (?) almost, or does something in Chrome? Other browsers to doesn't appear to affect this so much, but this is inline with the other sites I referenced anyway & what client was looking for so all good. Not 100% the reason for it, but I'll read through some of the doc's and see if I can make sense of it! All sorted though. Thanks for both your help & thanks for the amazing products as always! 

Link to comment
Share on other sites

21 hours ago, james12345 said:

In Chrome this changes the scroll 'speed' (?) almost, or does something in Chrome?

Are you saying that only when you set normalizeScroll: true, it scrolls at different speeds in Chrome than other browsers? I'm not seeing that and I'm not sure why that'd be. Would you mind offering a few more details? What operating system and browser version? 

Link to comment
Share on other sites

Hi Jack, apologies for the belated reply, I've just seen. Yeah this is correct. In Chrome & Edge. I'm not sure either but appears to be the case, but like I say, this seems to be inline with the other site I was referencing. Yeah sure:

Mac - M1 Chip - OS 11.2.3

Chrome: v101.0.4951.64
Edge: v101.0.1210.47
Safari: v14.0.3
Firefox: v100.0.0

Let me know if there's anything else. 

Link to comment
Share on other sites

Hey @james12345 - I'm not seeing different behavior, but would you please try the latest beta files and let me know if you notice any differences in the browsers still?  You'll probably need to clear your cache or put some cache-busting stuff on the end of the URLs:

Thanks!

  • Like 1
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.
×