Add ScrollSmoother Question

[mojoswift]

Hi everyone, 

 

Can anyone point me in the direction of how to add ScrollSmoother to this pen?

 

The effect is almost what I want, but I just need to ensure a smoother scroll that allows the text to appear & disappear much slower (and smoother). On a Desktop the mouse scroll is far too jumpy and makes it easy to miss the text.

A mobile is better, but still not perfect. 

 

Thanks so much in advance

See the Pen JjwZjXX by mojoswift (@mojoswift) on CodePen

[mvaneijgen]

Hi @mojoswift welcome to the forum!

 

What have you tried already? We love to see minimal demo you've made, that way we can see your thought process and thus better help you!

 

Just for the pen above and try your hand. You could set scrub: to a value something like 0.5 then it will 'lag' behind het scroll of the visitor. You can also change the ScrollTriggers try changing 80% to bottom and 40% to top this will increase the duration of the animation. 

 

Check out 

 

And for ScrollSmoother check the docs https://greensock.com/docs/v3/Plugins/ScrollSmoother

 

Hope it helps and happy tweening! And post back here when you're stuck with the demo you've made

 

 

[mojoswift]

Hi mvaneijgen, 

 

Thanks for the response. I appreciate it, sorry for being a complete rookie! 🥴

 

The scrub value is a nice touch!

 

For the start/end scroll positions this seemed about right:

      start: "bottom 90%",
       end: "top 10%",

The length seems good, but currently the fade-in is almost non-existent (or looks too fast). What can I tweak for this?

 

Mainly, I'm just struggling to add ScrollSmoother. I'm following the tutorials, and have added the code that the tutorials cover, but nothing seems to have an effect. Any extra pointers would be a huge help at this stage. 

 

Thanks again.

 

See the Pen NWezWrL by mojoswift (@mojoswift) on CodePen

 

 

[mvaneijgen]

I'm no ScrollSmooth expert, but you have to wrap your whole page in the wrapper not each individual section. Also the pen you started from used an old version of GSAP and ScrollTrigger, so I've updated them to the latest versions.

 

How is this looking? 

 

See the Pen QWzxNjv?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen

[mojoswift]

Wrap the whole page in the wrapper!! Gotcha! Makes sense. I completely overlooked that. Thanks. 

Also, I appreciate you updating the GSAP and ScrollTrigger versions. I would have never realised that. 😅

 

This is looking much better. Thank you. 

I noticed that you removed data-speed="2" as well. Is this meaningless?

 

 

[mvaneijgen]

While moving things around I removed everything that might be causing some issues.

 

It is not meaningless, it means that element will scroll twice as fast as anything else on the page (when ScrollSmoother is on). If that is the look you want to go for add it back in, but it was not part of your original question and it was really distracting when it was on, so I removed it.