[Wrong menu anchors positions]

Here is my code example for menu anchors

gsap.utils.toArray('.navigation-link').forEach(function (nav, i) {
  nav.addEventListener('click', (e) => {
    const id = e.target.getAttribute('href');
    gsap.to(window, {duration: 1, scrollTo:{y: `${id}`, offsetY:0}});
    e.preventDefault();
  });
});

It works perfectly! But my sections are pined (look code above)

gsap.utils.toArray('.overscroll').forEach((section, i) => {
    ScrollTrigger.create({
        trigger: section,
        start: "bottom bottom",
        pin: true, 
        pinSpacing: false,
    });
});

So, when i click forward, for example, from second nav link to fifth it works perfectly! But if I click backward (from 4 nav link to 2 nav link) it took me to wrong section position(((

When I disable pin: true it started work perfectly, but for my project I need these feature

PS Is is vertical scroll

Plz help😰

[Overlaping sections]

@Rodrigo Tnx you so much!🙂

[Overlaping sections]

Is it possible to do with gsap animation like this https://codyhouse.co/ds/components/app/overscroll-section

I'm strugguling with pined sections due to they dont scroll

My code example

gsap.utils.toArray(sections).forEach((section, i) => {
    ScrollTrigger.create({
        trigger: section,
        start: 'top top', 
        pin: true, 
        pinSpacing: false,
        onUpdate: self => console.log("progress:", self.progress),
        snap: {
            snapTo: sections, // snap to the closest label in the timeline
            duration: {min: 0.2, max: 3}, // the snap animation should be at least 0.2 seconds, but no more than 3 seconds (determined by velocity)
            delay: 0.2, // wait 0.2 seconds from the last scroll event before doing the snapping
            ease: "power1.inOut" // the ease of the snap animation ("power3" by default)
          }
    });
});