Scrolltrigger breaking occasionally

[tobiasger_]

I understand that it would be helpful with a CodePen for this in order to investigate it in detail, but since this is for a confidential project I'm not really able to share it at the moment. But maybe some general guidelines or tips could be provided given the problem I'm describing?

 

I have a page containing several ScrollTrigger instances where sections are pinned and content within the sections are animated when scrolling through them. The problem I'm experiencing is that somehow the calculation or the initialisation of ScrollTrigger is not working sometimes, resulting in sections closer to the bottom of the total scroll not being functional at all. This is resolved if I "hard update" the page in Chrome (cmd + shift + R), which I think triggers a complete reload of the page and a reset of the cache. If I do this, the whole site is behaving as I want it to. But if I then for example just update the page (cmd + R), most of the times I get this result where sections closer to the bottom is not initialised.

I've tried adding:
 

$(document).ready(function () {
    ScrollTrigger.refresh(true)
});

But this doesn't seem to fix it. I get a feeling that GSAP is trying to initialise the page before the DOM is completely loaded. But I'm not sure.

I'm not getting any errors in the console.

Are there any best practices to make sure that GSAP is initialised after the site is fully loaded? That's at least my hypothesis for a solution currently, as it works as intended when "hard updating" Chrome.

[akapowl]

Hello Tobias,

 

Minimal demos don't need to contain your whole project - that's the point of them being minimal  

The more you can boil things down to the issue being replicable with e.g. minimally styled placeholder divs, the better in fact.

 

Issues like yours can have several origins from multiple different parts of the page/code, so it's really hard to give any solid advice without one.

 

It might be images that are not loaded yet when you create your ScrollTriggers or something else changing the layout after the creation. If you can't set fixed dimensions to images for instance, you could work with 'load' eventListeners to make sure they are loaded and won't shift the layout of the page around anymore when you create your ScrollTriggers.

 

It might very well be something different, though, too, like your environment or the time that you load your .js files.

 

Or maybe you are not creating your ScrollTriggers in order of appearance of the (trigger-)elements on the page - it's always best to do so. If you can't or just don't want to because it is more convenient to creat them in loops e.g., you might want to have a look at the documentation of ScrollTrigger.sort() and/or in combination with the .sort() method, refreshPriority (which is also explained on that docs-page linked).

 

You see, there are lots of possibilities for the origin(s) of your issues, so a minimal demo would be much appreciated.

 

[tobiasger_]

§