Hey @Rodrigo thank you very much for your support!
Edit:
With your suggestion, I was able to achieve it, looking also at this post:
Basically, I managed everything as a timeline and then added the ScrollToPlugin to manage the scroll on load as follow:
gsap.registerPlugin(ScrollTrigger, ScrollToPlugin);
// gsap responsive controller
let mm = gsap.matchMedia();
// Array gsap for panels
const panels = gsap.utils.toArray(".panel:not(:last-child)");
// Initialize gsap only in desktop version
mm.add("(min-width: 990px)", () => {
// Set a timeline to control better the ScrollTrigger in the page
const timeline = gsap.timeline({
scrollTrigger: {
trigger: ".page--home",
start: "top top",
end: () => "+=" + innerHeight * panels.length,
scrub: true,
pin: true
},
});
// Set gsap scrollTrigger event on each panel
panels.forEach(function (e, i) {
timeline.to(
e,
{
yPercent: -100,
ease: "none",
stagger: 0.5,
},
i
);
});
/* Manage scroll to section on page load if hash in url */
if (window.location.hash) {
// Get hash
var hash = window.location.hash;
// Get the panel number by data attribute
let panelNumber = parseInt($(hash).data("panel"));
// Gsap scroll to the numbered section
gsap.to(window, { scrollTo: panelNumber * innerHeight });
}
});
// Set gsap zindex of each panel to show the first with the highest index (absolute panels)
gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i })
