ScrollSmoother not Working Vanilla JS

[Shaban Iddrisu™]

Hello,

 

I have been using ScrollSmoother since it was revealed and I never had any issues with it until now. I am trying to use it in my current project and it is very choppy, sticky and unusable. I tried everything I could to make it work and yet nothing.

It is quite strange why I am having this issue. My HTML structure still contains a "#main-wrapper" and a "#scrollable" container. Previously the "#scrollable" was the only child of the "#main-wrapper"; however, now that's not the case because I am removing the current "#main-wrapper" and replacing it with the next "#main-wrapper" on Barba Js page transition.

Not only that, now it won't work even on CodePen too. 
Perhaps I am missing a crucial step, I can't tell; hence, it would be great if you would facilitate me.

I have attached a short video recording showing how choppy it is for your reference.

Thanks,
Regards.

See the Pen bGQEQXe by shaban-iddrisu (@shaban-iddrisu) on CodePen

[Rodrigo]

Hi,

 

Is hard to tell about the issues in your site, but at least in the codepen example you're not adding ScrollTrigger, keep in mind that ScrollSmoother works on top of ScrollTrigger. Here is a fork of your codepen that includes ScrollTrigger and seems to work as expected with the same markup:

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

 

Check your project to see if you included ScrollTrigger and that is registered as well.

 

Hopefully this helps.

Happy Tweening!

[Shaban Iddrisu™]

Hello @Rodrigo
Thanks for your response.

I confirm adding the ScrollTrigger to my project in CodePen solved the issue; however, NOT in my main project.

I did add the ScrollTrigger happily thinking all will be solved and still, the issue kept on. So I did a little digging in my code, and voila..!

 

I have a custom utility called Use. In there, I create almost every reusable functions, variables, components etc to be instantiated anywhere I need it in my projects.

Amongst these is the CustomEase setup I have.

One of the custom ease functions was my downfall, it is named"expo" which I think is conflicting with some internals of either ScrollTrigger or ScrollSmoother.

Here is a link to a video demonstrating the issue.

If that's the case, I think users should be aware of this and a feasible solution implemented as soon as possible.

Thanks,
Regards.

[Rodrigo]

Hi,

 

Actually GSAP has an easing function called expo, so that could be the cause of this:

https://greensock.com/docs/v3/Eases

 

I'm not sure how exactly that would conflict but if changing that particular name, fixes your issue, that's great to hear!

 

Happy Tweening!

[GreenSock]

Ah yes, you definitely shouldn't be naming your custom ease the same thing as one of the existing eases - you're essentially overwriting it. ScrollTrigger uses the "expo" ease for the scrub tween.