ScrollTrigger from GSAP Freezes When Element Is Pinned

I’m experiencing an issue with GSAP’s ScrollTrigger plugin. Here’s the setup:

• Inside a parent div with the ID #fimages, there are two child div elements: #fright and #fleft.
• I want to pin the #fright div when it reaches the top of the viewport, while allowing the contents of #fleft to scroll.
• The ScrollTrigger should end when the final element inside #fleft reaches the end of the viewport.

Issue:

Everything works as expected while scrolling through the entire website without stopping. However, when the #fright element gets pinned, if I stop scrolling, the page seems to freeze—meaning I can’t scroll using the scroll wheel. The scrollbar on the side still works, and if I use it, I notice that the website scrolls in the background, but the pinned div remains stuck.

I’ve provided a link to the website where you can see the issue in action.
live-server
github link to view the entire code
Does anyone have insights into why this might be happening or how to resolve it?

here is the code
Javascript:

     gsap.to(".fleftelm", {
          scrollTrigger: {
               trigger: "#fimages",
               pin: true,
               start: "top top",
               end: "bottom bottom",
               endTrigger: ".last",
               scrub: 1,
               // markers:true,    // use this markes if you want
          },
          y: "-300%",
          ease: Power1,
     });

HTML :

     <div id="fimages">
            <div id="fleft">
                <div class="fleftelm">
                    <h3>Riyadh</h3>
                    <h1>official website of riyadh, saudi arabia's capital.</h1>
                    <h4>design, development, product</h4>
                </div>
                <div class="fleftelm">
                    <h3>Riyadh</h3>
                    <h1>official website of riyadh, saudi arabia's capital.</h1>
                    <h4>design, development, product</h4>
                </div>
                <div class="fleftelm">
                    <h3>Riyadh</h3>
                    <h1>official website of riyadh, saudi arabia's capital.</h1>
                    <h4>design, development, product</h4>
                </div>
                <div class="fleftelm last">
                    <h3>Riyadh</h3>
                    <h1>official website of riyadh, saudi arabia's capital.</h1>
                    <h4>design, development, product</h4>
                </div>
            </div>
            <div id="fright">
                <div class="images">
                     <img src="https://cuberto.com/assets/projects/riyadh/cover.jpg" alt="">
                </div>
            </div>
        </div>

And yes i have included all the MDN

I implemented GSAP ScrollTrigger to pin #fimages and animate .fleftelm vertically. I expected smooth scrolling and pinned elements, but the scroll wheel becomes unresponsive when pinned.