Performance issue with ScrollSmoother + Barba.js

[MadG]

Hey all, 

 

Unfortunately, I've tried to recreate this issue in Codepen, and it's just not working, so I'm linking the development environment for the site as well as a super-simplified version of our JS file for the site. The issue I'm running into is with ScrollSmoother interacting with barba.js. For anyone unfamiliar, Barba is an AJAX-based page transition library that loads new pages without a browser refresh in vanilla HTML/JS sites. You should be able to see the problem behavior in the dev environment - if you load the homepage fresh, ScrollSmoother inits and works fine. However, if you navigate to the History Page and then transition to the homepage via Barba by clicking the logo "Mining Exchange Hotel", the scroll on the page is super laggy, and running a performance profile, it appears to be related to a reflow issue originating in ScrollSmoother. Should I be trying to manage these two libraries together in a different way? You can see in the js file that currently, we're killing the smoother before the page transitions and re-initializing it before the new page enters, but the same behavior persists even if I comment those out and maintain the same smoother instance throughout all the page transitions. Thanks in advance for any help. 

[MadG]

Wanted to add one more piece of detail to this - starting on the homepage, navigating to another page, then navigating BACK to the homepage without a hard refresh also does fine. It only appears to be an issue if you start with a fresh browser reload on another page and then navigate back to home. 

[Rodrigo]

Hi,

 

Sorry to hear about the issues 😞

 

Unfortunately there is not a lot we can do in a live page and on top of that I don't see any barba transitions there. You are positive that the ScrollSmoother instance is killed before removing the previous route is removed from the DOM and that the new one is created when the new route is added to the DOM and the other is no longer present?

 

Maybe try killing all ScrollTrigger instances as well, just in case:

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

 

Beyond that I can't think of any other cause for this, except that maybe wordpress is adding something that is causing it.

 

Also ideally the smooth wrapper should be a direct descendant of the body tag, right now you have another DOM element as an ancestor of the smooth wrapper.

 

Sorry I can't be of more assistance.

Happy Tweening!

[MadG]

Totally understand, I knew it was a long shot, I just can't get the problem to replicate in a codepen. I did just pick this up from another dev and am still kind of orienting myself, so I may make some more discoveries on what's happening. 

 

I'll ensure all your suggestions above are properly implemented, and if I find out anything else that may point us in the right direction I'll post back here with either further details or an answer that can help folks in the future. 

 

Thanks for your help! GSAP is a joy to work with, as always.