All scroll scene animations play when the first section comes into view

[jjozsi]

I applied custom navigation to sections on the home page of https://linencare.ie/preview/ and it works mostly ok.
Each section under the hero section should slide in as the middle of the section reaches the bottom of the viewport.
What’s happening instead: If I scroll the page immediately after the page loaded all sections animate as soon as the first section triggers the animation.
If I wait a few seconds before start scrolling after page load, animation seem to work as expected, animating one by one as it comes to view.
Error:

Any idea why is this happening and how can I prevent it?

[Riccarcharias]

Can you show screenshots of your PG Interaction settings?

[matjaz]

@jjozsi after investigation, it appears this happens when the scroll happens while the page is still being loaded.

One workaround is to load pgia.js manually on the page load and calling ScrollTrigger.refresh() afterwards:

<script>
            window.addEventListener("load", (event) => {
                var script = document.createElement('script');
script.src = "https://linencare.ie/preview/site/templates/pgia/lib/pgia.js";
document.head.appendChild(script);
script.onload = function() {
    pgia.scrollSceneManager.init();
    ScrollTrigger.refresh();
};           
});
</script>

Remove the current pgia.js script include and add the above code at the end of the body element.

In my experiemnts this helps prevent the issue, but note that calling ScrollTrigger.refresh() causes the page to jump up to the top.

[jjozsi]

@matjaz Thank you for checking it and for the workaround. That was my suspicion too, I still don’t understand though why the animation works but not the way I expect it.
The production site will be fully cached, that will drastically improve load time. If the issue persist I’ll implement your workaround.

[jjozsi]

@Riccarcharias Sure, you can see everything here (apart from the custom animation).