Scroll specific div without having to hover over it

I have a section which essentially contains an image and some text.

I'm using GSAP to pin the section on scroll and now I'm looking to scroll the text, without making the user hover over it.

Key points:

• .configurator is 100vh
• When the .configurator is pinned, I want the content in .configurator__options to start scrolling, until it reaches the end, and then unpin.

I don't want to set an overflow: scroll to .configurator__options, because the content will only be scrollable once the user is hovering over that div.

If the users mouse is hovering over anything in .configurator then I want the content in .configurator__options to scroll.

Demo:

$(function() {

  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".configurator");

  gsap.to(container, {
    ease: "none",
    scrollTrigger: {
      trigger: container,
      markers: true,
      start: "top top",
      end: "+=200%",
      pin: container,
      scrub: 2,
    },
  });

});

.spacer {
  height: 200px;
  background: black;
}

.configurator {
  height: 100vh;
  overflow: hidden;
}
.configurator__header {
  border-top: 1px solid black;
  padding-top: 30px;
}
.configurator__options {
  background: lightblue;
  overflow: hidden;
  height: 600px;
  padding: 0 30px;
}
.configurator__images img {
  width: 100%;
}

.footer {
  height: 1000px;
  background-color: black;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<div class="spacer"></div>

<section class="configurator">

 <header class="configurator__header">Header</header>

  <div class="container-fluid px-0">
    <div class="row">

      <div class="col-6">
        <div class="configurator__images">
          <img src="https://picsum.photos/200/300" alt="test"/>
        </div>
      </div>

      <div class="col-6">
        <div class="configurator__options">
          <div class="configurator__options-inner">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
          </div>
        </div>
      </div>

    </div>
  </div>

</section>

<footer class="footer"></footer>

I haven't seen any questions on SO or the GSAP forums which detail how to make another element scrollable, when hover over another.

Edit

For demo, see below site:

1. Click here
2. When your mouse is over the images, start to scroll down
3. Notice how the text on the right hand side is scrolling down, even through you're hovering over the image

Here is a gif to show the above:

from Scroll specific div without having to hover over it