Scroll jump to the top issus When Enabling ScrollTrigger Instances

[issam.seghir]

When I click on a navigation link to scroll to a specific section of the page using lenis.scrollTo, all scrollTrigger animations run, causing a poor scrolling experience due to the numerous animations in each section. To address this, I attempted to disable the animations using scrollTrigger.disable() when lenis.scrollTo runs and re-enable them when the particular section is reached. While the animations created with ScrollTrigger pause correctly during the scroll, the page jumps to the top when the scroll is complete. You can view the codepen demo here:
see codepen demo here : 
 

See the Pen rNoqRjv by issam_seghir (@issam_seghir) on CodePen.

[Rodrigo]

Hi,

 

I don't have a lot of experience working with Lenis but maybe instead of disabling/enabling the ScrollTrigger instances, you could try preventOverlaps and fsatScrollEnd in your ScrollTrigger config:

 

 

Beyond that I can't think of anything else since Lenis is not a GSAP plugin. We have our own smooth scrolling solution called ScrollSmoother

 

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

 

Hopefully this helps

Happy Tweening!

[issam.seghir]

The problem does not lie with lenis, lenis only improves the smoothness of scrolling, the animation will still running when scrolling takes place (when clicking on navigation links), even if lenis is not present. this problem occurs when using the smooth scrolling option provided by the native settings.

Anyway, I'll give the suggested options a shot and see if they fix the problem.

[issam.seghir]

i tried both, preventOverlaps  it seems not what I'm looking for,  fastscroll had bugs and lags with lenis , without lenis , there was no noticeable change when using this feature. The animation still ran when clicking on a nav link. I even tried adjusting the value to 500px, 3000px, and 8000px, but it didn't produce the desired result.

[Rodrigo]

Hi,

 

I'm not saying that Lenis is at fault here. The main issue here is that you have animations tied to the scroll position. If you move or change that particular position, those animations has to be updated accordingly.

 

As you already tried disabling all the ScrollTrigger instances helps but when you enable them again ScrollTrigger has to go to the top of the document in order to run all the calculations again in order to set the start and end points, calculate pins, etc. As you can see this is a complex process.

 

The only thing I can think of is to store the scroll position and use ScrollTrigger scroll method to get to that position

 

https://greensock.com/docs/v3/Plugins/ScrollTrigger/scroll()

 

But I can't really guarantee that it'll work. Again this is a tricky scenario

 

Hopefully this helps

Happy Tweening!

[GreenSock]

No no, it's definitely not a good idea to disable the ScrollTriggers just to scroll and then re-enable them because when you've got ScrollTriggers with pinning, that adds pinSpacing which pushes things further down on the page to accommodate the pinning of course. So let's say your page starts out at 1000px tall, but you have 3 pinning ScrollTriggers that pin for 500px each. That makes your page 2500px tall now. So let's say you scroll to 2000px and then you click a link that suddenly disables all those ScrollTriggers...well now your entire page is only 1000px tall so of course it'll jump (it can't be at a scroll position of 2000px if your page is only 1000px total), and then re-enabling it forces the page back open again. Not to mention all the performance hit you'll take by removing the pin spacing, changing the DOM, forcing ScrollTrigger to re-do all its calculations, etc., etc. So there are both logic problems and performance costs that you're incurring with your approach. 

 

Also, it looks like another logic flaw is that you're calculating the destination scroll position while all the ScrollTriggers are enabled (let's say that means 2000px in this example), then you're disabling them which collapses the whole page so that it's impossible to even reach that destination so Lenis can't possibly do what you're asking, and then you re-enable the ScrollTriggers which forces the page back open again. 

 

If your goal is to basically limit the animations from doing much during your scroll, you could just set gsap.ticker.fps(1) (make GSAP update only once per second) during the scroll, and then set it back to 60 (or some higher number) after that. Does that help at all? 

[issam.seghir]

@GreenSock its look better with fps(30) ,  but i can't back to fps(60); , it still 30 fps always 

see demo :

See the Pen eYboeBm by issam_seghir (@issam_seghir) on CodePen.

 

[GreenSock]

I'm confused - what do you mean you "can't back to fps(60)"? Why do you think it's 15fps? 

[issam.seghir]

@GreenSock  you said :  "If your goal is to basically limit the animations from doing much during your scroll, you could just set gsap.ticker.fps(1) (make GSAP update only once per second) during the scroll, and then set it back to 60 (or some higher number) after that. Does that help at all? "

[GreenSock]

Yes, I know what I said but don't understand your response. Can you please elaborate on exactly what the problem is now? 

[Rodrigo]

Hi,

 

I think the issue here is what happens when you scroll using the mouse wheel before Lenis' scrollTo method is completed. It seems that the onComplete callback never runs so GSAP ticker's fps is never updated. If you completely wait for the scrollTo animation to be completed you can see that it goes back to 60. This is more something related with Lenis API not providing an event callback for interrupting the scrollTo method than a GSAP related issue actually:

See the Pen JjwqYZW by GreenSock (@GreenSock) on CodePen.

 

Hopefully this helps

Happy Tweening!