I have put some GSAP code into a shortcode on a wordpress site for a client, but the first element seems to have some issues with positioning when refreshed not from the top of the page.

Demo Here

Here is the Javascript code for the GSAP pins specifically

const $panels = $(".panel");
let mm = gsap.matchMedia();

if ($panels.length > 0) {
mm.add("(min-width: 901px)", () => {
$panels.each(function(i, panel){
const isLastPanel = i === $panels.length - 1;
const trigger = gsap.to(panel, {
id: i,
scrollTrigger: {
trigger: panel,
pin: true,
pinSpacing: false,
start: "top-=89 top",
end: isLastPanel ? "bottom bottom" : "",
onEnterBack: () => {
if (isLastPanel) {
trigger.kill();
}
},
},
});
triggers.push(trigger);
});
});
}

However I am having some frustrating issues when refreshing anywhere on the page apart from the top. The first pinned element appears to pin right at the top of the site, and then is offset and hidden afterwards. The other pinned elements appear correctly.

Please feel free to investigate the DOM tree with your dev tools, as I wonder if maybe it could be an issue with some of the parent containers not having the right classes? I just can’t identify the issue.

I have tried fixing the GSAP code specifically, and nesting the pinned ScrollTrigger content in a relative container which helped resolve other issues but has left me with this one.