How can I synchronize text scrolling with video seeking using GSAP and ScrollMagic?

Question

How can I implement a GSAP-based animation effect in which a video scene seeks forward as I scroll, and I also need to scroll text into view (like any other element, enters from the bottom of the screen and exits from the top) at a specific time in the video scene while ensuring the video scene continues to seek as I scroll further? My current code uses ScrollMagic for the video scroll, and here's the HTML and JavaScript code I've written for reference.

<div class="vid">
      <h2 class="text" id="t1">
        Powered by <br />
        <span style="color: orange; font-size: xx-large"
          >Integrated Power Converter</span
        >
        <br />The first combined fast charger<br />
        and motor controller in the world.
      </h2>
      <h3 class="text" id="t2">
        Our A fast charger that's always with you. patented technology allows
        fast chargers to be packaged on-board. Range anxiety is now history.
      </h3>
      <h3 class="text" id="t3">
        15km in 10mine Wherever you park. Integrated Power Converter plugs into
        any 15A outlet or Level I Charge Point. Or plug into an Ergon Charge
        Point for seamless fast charging
      </h3>
      <h1 class="text" id="t4" style="font-size: 60px">
        Home.<br />
        Office.<br />
        Wherever
      </h1>
      <video src="./ergon.mp4"></video>
    </div>


const intro = document.querySelector(".vid");
const controller = new ScrollMagic.Controller();
let scene = new ScrollMagic.Scene({
  duration: 22000,
  triggerElement: intro,
  triggerHook: 0,
})
  .addIndicators()
  .setPin(intro)
  .addTo(controller);

scene.on("update", (e) => {
  scrollpos = e.scrollPos / 1000;
  video.currentTime = scrollpos;
});

The tags with the class text, need to appear at different parts of the video, and scroll out within certain seconds of the scene.