Use ScrollSmoother features with lenis scroll

[PubliAlex]

Hello,

I discovered you library, especially ScrollTrigger plugin and this is just awesome. I'm also very interested by the quick way to can add parallax to elements using SmoothScroller library.

 

However, I don't really like the fact that you fake scroll by translating element. I prefer the vision of lenis library that apply smooth to the native scroll.

 

My question is : Could we use the best of both world by using lenis to handle smooth scroll and keep the ability to use data-speed and others data attributes provided by SmoothScroller to create awesome parallax rapidly.

 

Or even better, do you plan to update you SmoothScroll plugin to use native scroll instead of translate and keep all others features in a near future ?

 

Thank you

 

Best regards,

[Cassie]

Hey there.

Just to clear something up, ScrollSmoother does leverage native scroll, it's a hybrid approach, unlike entirely event driven approaches like locomotive.

There are pros and cons to ScrollSmoother and Lenis for sure,

Lenis is nice as you can use position sticky and cmd+f, that's a big pro! But it doesn't smooth all inputs like ScrollSmoother, it only smooths wheel, if you drag the scrollbar or use the spacebar or tab to navigate it isn't smoothed at all. 

We're keeping an eye on which features are most important for our users so we appreciate the feedback!

In the interim - you can use ScrollTrigger to create parallax or any other animated effects, so if you were to go with Lenis you can roll your own effects. I certainly wouldn't use Lenis and ScrollSmoother, that's just asking for trouble 🫠

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

[PubliAlex]

Thank you so much for your answer.

 

You are correct, ScrollSmoother does leverage native scroll. I found a table on the lenis page that resume strength and weakness of all library

 

 

Even if ScrollSmoother, with it's approach can smooth everything, to me, the cost for this is too much high. You lose some essential accessibility features like ctrl + f as you mentionned, you lose css sticky, you lose intersectionObserver, the library is 10x bigger...

 

The only thing that miss me is the build-in animation system. I can, for sure, manually add elements with ScrollTrigger with some javascript, and I will, but it's definitely comfortable to be able to add some cool parallax effect with just some data-attributes.

 

I wonder if the built-in animation system of ScrollSmoother could be externalized to a standalone plugin with the compatibility with ScrollSmoother AND native scroll. It would make sense because, after all, animation system and smooth scroll are 2 different things.

[GreenSock]

We do appreciate the feedback. Lenis sounds great in many ways - just keep in mind that comparison charts like that can be slanted (not necessarily intentional - it's just the nature of comparisons from excited authors, myself included). ScrollSmoother offers a whole lot more than just scroll smoothing (like some very advanced effects, pausing, velocity, speed, full integration with GSAP, and more). I'm not even sure what "normalize scroll experience" means in that chart but we've put probably over 1,000 hours into normalizing scroll experience. We even have a dedicated ScrollTrigger.normalizeScroll() method

 

But yes, we are definitely taking in the feedback and letting it shape the future of ScrollSmoother. I've got several ideas to explore. So thanks again for the suggestions. I agree that accessibility is extremely important and can trump the "smooth scroll everywhere, including drag of the scrollbar, hitting space/arrows, etc." features.

 

In the meantime, my understanding is that Lenis works great with ScrollTrigger so you're welcome to use them together. We very much admire the work of the folks at Studio Freight and I think they're heavy users of GSAP/ScrollTrigger. 💚

[Anas Ali Khan]

Is lenis is paid ?? or is it free

 

[Rodrigo]

Hi @Anas Ali Khan,

 

Lenis is free but is a product of Studio Freight:

https://lenis.darkroom.engineering/

 

Just be aware that we can't offer support for Lenis here, since we need to keep our focus on GSAP related questions.

 

Finally we do have a smooth scrolling solution called ScrollSmoother, that is fully integrated with ScrollTrigger:

https://gsap.com/docs/v3/Plugins/ScrollSmoother/

 

Happy Tweening!

[Anas Ali Khan]

Thankyou so much for your time