How can I dynamically adjust the offset value for a ScrollMagic animation to ensure synchronized animations on both regular and larger screens?

Question

In the given code, I'm attempting to create two synchronized animations using ScrollMagic. The first animation involves a video whose playback is controlled by scrolling, while the second animation is a text that flies in at a specific point in the video. To achieve this, I've used TweenMax and ScrollMagic, setting an offset value for the text animation to ensure it starts at the right moment.

The issue I'm encountering is that on larger screens, the text animation comes in later than expected. I initially considered using the triggerHook value between 0 and 1 to address this problem, but it didn't provide the desired results.

How can I make the offset value for the text animation dynamic, so that it starts at the right time, especially on larger screens?

let scene = new ScrollMagic.Scene({
  duration: 19000,
  triggerElement: intro, //video
  triggerHook: 0,
})
  .addIndicators()
  .setPin(intro)
  .addTo(controller);
 
const height = window.innerHeight;
 
const textAnim = TweenMax.fromTo(text1, 3, { y: 0 }, { y: -1.5 * height });
let scene2 = new ScrollMagic.Scene({
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0,
})
  .setTween(textAnim)
  .addTo(controller);
 
// Calculate the offset based on scene's duration
let scene3Offset = scene.duration() * 0.315 - 1000; // 31.57% of scene's duration
 
const textAnim2 = TweenMax.fromTo(
  text2,
  4,
  { y: height },
  { y: -1.5 * height }
);
let scene3 = new ScrollMagic.Scene({
  duration: 3000,
  triggerElement: intro,
  triggerHook: 0, 
  offset: scene3Offset,
})
  .setTween(textAnim2)
  .addTo(controller);