I’m trying to create an inner scroll in the section with GSAP. It means when I scroll to the section, scroll will trigger inner scrolling inside of the section until it reaches the end of the inner scroll, and then just normal scroll through rest of the site.

The problem is, while pinning one section, the others (+ header & footer) are just scrolling upwards. The next section is completely invisible scrolled upwards behind the current one. And in order for my code to work properly, I just have to add a margin to this section equals to all my section heights combined. What am I doing wrong?

My code for that is

gsap.to(sections, {
    yPercent: -100 * (sections.length - 1), 
    ease: "none", 
        scrollTrigger: {
        markers: true,
        trigger: $(".scroll-container").closest('.mp-block'), 
        pin: true, 
        scrub: 1,
        snap: {
        snapTo: 1 / (sections. length - 1),
        duration: 0.05, 
    },
    pinSpacing: false,
    end: () => "+=" + sections.map(sec => sec.offsetHeight).reduce((accumulator, currentValue) => {
        return accumulator + currentValue
    }, 10)
}