ScrollSmoother does not recalculate body-height after DOM-injectoin

[marvet 0 Likes (Newbie)]

Hi there,

 

we've started using the GSAP ScrollSmoother in one of our projects, what actually works fine. This project is a SPA, so all pages are loaded via AJAX and the pre-rendered HTML is injected into the page/DOM. In some cases, ScrollSmoother recalculates the height of the body correctly after the injection, in other cases the body's height is set to 2000px. The function of loading and injecting is always the same, even the contents (markup) are similar.

 

Does anybody have a clue? 

 

Thank you in advance.

[OSUblake 18,495 Likes (Superhero)]

Welcome the forums @marvet

 

ScrollSmoother does not know about changes to the DOM, so you'd need to refresh it after you make changes.

 

ScrollTrigger.refresh();

 

[marvet 0 Likes (Newbie)]

Thank you for your quick reply.

 

You're pointing on ScrollTrigger, but in our case its's ScrollSmoother which causes the issue. We've tried adding your solution but it didn't had any effect. Also we've verified if the height is beeing calculated by ScrollTrigger (which we are also using in this project) or ScrollSmoother and it's latter.

 

Somehow, only in some cases the height is not calculated correctly, in others it is.

[marvet 0 Likes (Newbie)]

UPDATE

 

Got it. It's not an issue with ScrollSmoother (or ScrollTrigger) which actually works perfect. We had a situation which was blocking the correct calculation. The good thing about this... now we know, that ScrollSmoother automatically update the body's height after changes to it.

[OSUblake 18,495 Likes (Superhero)]

10 minutes ago, marvet said:

You're pointing on ScrollTrigger, but in our case its's ScrollSmoother which causes the issue.

 

ScrollSmoother is just a complex ScrollTrigger, so ScrollTrigger.refresh() will update it. Notice how it doesn't update if you comment out the refresh call in the click handler.

 

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