Gsap code screen size not working

Design help Custom code
1

Hello everyone,

I have this nice animation for my homepage but for some reason the staggering of the letter effect lags on ipad and iphone screen.

I would loveeeee to fix that but I couldn’t find the reason/answer for the lag.

Therefore I attempted to have just a regular fade-in effect function for screen that are smaller than 991px. However, this is not working… still having the same animation as the main one.
Any help?

If someone has an idea on why it is lagging - that would be great also.

Truly appreciate your time!

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script>
<script src="https://unpkg.com/split-type"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.0/CustomEase.min.js" integrity="sha512-XX40O/7y8Ax9zhkKKZWG0kSmJegYO8c72MBtSquY/D12JSs3dg0uVecofd56wTZJCGS3ibubsi8ViSTwDwGwAA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<script>
let animDuration = 0.1;
let animStagger = 0.025;

// animate the 'intro' class
let typeSplit = new SplitType(".intro", {
  types: "words, chars",
  tagName: "span"
});

let introHeading = ".intro .char";

let introTimeline = gsap.timeline({delay: 0.2});
introTimeline.set(introHeading, {color:'#D3D3D3'})
introTimeline.from(introHeading, {
  y: "-100%",
  opacity: 0,
  stagger: {
    amount: 2,
    from: "start",
    ease: "power1.inOut",
    onComplete: function () {
      gsap.to($(this.targets()[0]), { color: "#000000" });
    }
  },
  duration: animDuration * 8,
  ease: "power1.inOut",
});

// animate the 'subintro' class
let subTypeSplit = new SplitType(".subintro", {
  types: "words, chars",
  tagName: "span"
});

let subHeading = ".subintro .char";

let subTimeline = gsap.timeline({delay: 2});
subTimeline.set(subHeading, {color:'#D3D3D3'})
subTimeline.from(subHeading, {
  y: "-100%",
  opacity: 0,
  stagger: {
    amount: 2,
    from: "start",
    ease: "power1.inOut",
    onComplete: function () {
      gsap.to($(this.targets()[0]), { color: "#000000" });
    }
  },
  duration: animDuration * 8,
  ease: "power1.inOut",
});

if (window.innerWidth < 991) {
  // for small screens, just do a simple fade in
  gsap.from(".intro, .subintro", {
    opacity: 0,
    duration: 0.5,
    ease: "power1.inOut",
  });
}

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Did we ever get anywhere with this? I’ve hit the same roadblock.