Custom code initial animation does not load smoothly

Design help Animations & Interactions
1

For the animation of the H1 headlines and teaser texts at the beginning of the respective pages I used custom code. Unfortunately, the animation does not load smoothly on my desktop, but it does on mobile. Does anyone here have a solution suggestion?

Thanks a lot in advance!

Here is the code I used:

Head Code:

<style>
.word-line {overflow: hidden;} 
.skew-up {opacity: 0;}
</style>

Footer Code:

<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/ScrollTrigger.min.js"></script>
<script>
let addAnimation = function () {
  $(".skew-up").each(function (index) {
    const text = new SplitType($(this), {
      types: "lines, words",
      lineClass: "word-line"
    });

    let textInstance = $(this);
    let line = textInstance.find(".word-line");
    let word = line.find(".word");

    let tl = gsap.timeline({
      scrollTrigger: {
        trigger: textInstance,
        start: "top 85%",
        end: "top 85%",
        onComplete: function () {
          $(textInstance).removeClass("skew-up");
        }
      }
    });

    tl.set(textInstance, { opacity: 1 }).from(word, {
      y: "100%",
      skewX: "-6",
      duration: 2,
      stagger: 0.03,
      ease: "expo.out"
    });
  });
};

addAnimation();

window.addEventListener("resize", function (event) {
     if ($(window).width() >= 992) {
      // do your stuff
      addAnimation();
    }
});
</script>

<script>
let copiedTl = gsap.timeline({ paused: true });

copiedTl
  .to(".is-copied", { opacity: 1, y: "0%", ease: "expo.out", duration: 1 })
  .to(".is-copied", { opacity: 0, delay: 1, duration: 1 });

$(".btn-parent.copy").on("click", function () {
  copiedTl.restart();
});

</script>

Here is my public share link: LINK
(how to access public share link)