Scrolljacking or pinning only slides section on page

Question

I want to have a page where you scroll normally until you reach a section, where I have a few slides, the scroll behavior here should change to something like fullpage.js until the slides end and then normal scroll behavior is restored.

Html structure of the page https://codepen.io/skb089/full/poPbdqe

The three items: .a-item, .b-item and .c-item are my slides that I want fullpage.js like functionality on and the .normal-scroll is the part where I want the page to scroll normally

So far I've tried:

Swiper Js with mouse control enabled, but its release on edges feature is very buggy and doesn't work properly. Issue highlighted here but the provided solution doesn't work for me.

Intersection observer to check when the object is completely in the view port and disable scroll using jquery mousewheel and then show each slide by a loop based on scroll direction and other conditions, but whenever I scroll too fast intersection observer doesn't fire at the right time either and leads to a horribly inconsistent experience.

var Options = {
  root: null,
  rootMargin: "0px",
  threshold: 0.99,
};    
observer = new IntersectionObserver((entries) => {
      entries.forEach((entry) => {
        const ratio = entry.intersectionRatio;
        const section = entry.target;
        if (ratio >0.99) {
          disableScroll()
        }
        else {
             console.log("no")
         }
      });
    }, Options);
    
    var abc= document.querySelector(".abc");
    observer.observe(abc);

I tried this to circumvent it but it didn't change anything

Then ScrollTrigger by Gsap, I can get the section pinned using this, but the timeline doesn't work as intended, I have to scroll constantly for it to animate and if I scroll too fast the section is skipped. Snapping to labels by direction isn't smooth either and lags often times.

let tl = gsap.timeline({
  scrollTrigger: {
    trigger: "#items",
    pin: "#items",
    start: "top top",
    end: "bottom 40%",
    scrub: 1,
    snap: {
      snapTo: "labelsDirectional",
    },
  },
});

tl.addLabel("a")
  .to(".nav-dot.a", { outline: "1px solid white" })
  .addLabel("b")
  .to(".a-item", { autoAlpha: 0 })
  .to(".nav-dot.a", { outline: "1px solid transparent" })
  .from(".b-item", { autoAlpha: 0 })
  .to(".nav-dot.b", { outline: "1px solid white" })
  .addLabel("c")
  .to(".nav-dot.b", { outline: "1px solid transparent" })
  .to(".b-item", { duration: 0.1, autoAlpha: 0 })
  .from(".c-item", { duration: 0.1, autoAlpha: 0 })
  .to(".nav-dot.c", { outline: "1px solid white" })
  .addLabel("end");

Some solution to this would be highly appreciated.