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.
preview
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.