Animations flicker on ipad

[SWALKER]

I have finished my website but there is one issue I just cannot seem to fix. On ipad, the 3 basic animations which animate three titles from left to right using x values, stick, flicker and then jump. I have tested in many other browsers and desktop and it's perfect but not ipad - it's also slower on ipad? It is the same issue using either chrome or safari on ipad (and probably others).

 

I can't understand it as I have used the exact same type on multiple objects and they all work perfectly.

 

I can't see any syntax errors in my code 

The link URL is https://tinyurl.com/b3frsvyh and it's the 3 links that say Facebook, Instagram and Newsletter 

I have tried to make a codepen to replicate the environment as much as I can but the issue doesn't seem to happen on ipad and I can't work out what the difference is between this and my site

I included all my tweens because I thought maybe it was an issue in a previous tween that was causing it? The tweens in question are near the bottom, just above the match media ones 

It's driving me mad so any help would be greatly appreciated
 

See the Pen abywYXa by shereewalker (@shereewalker) on CodePen

[nico fonseca]

Hey @SWALKER ,
There are many things can cause that problem, and if in your Codepen works then the problem is probably somewhere in your site.
I saw that you have a css animation on your elements

.secondary a *, .site-footer a *, .site-header a *, a {
    transition: all .2s linear;
}

Try to remove them, as they bring problems when you are also animating with GSAP.
If that doesn't fix the problem, try adding will-change: transform on your elements or force3D: true on your tween and see if this improves anything.

 

[nico fonseca]

Btw, my recommendation is to try to debug on your site commenting most of the things (CSS,JS) until you see what is the cause of the problem. 🙂

[SWALKER]

Hi there, thanks for that. Unfortunately that first piece of code did not work. I will go through and see if i can narrow it down. 

How would I add will-change or force3D onto this for example?

gsap.to(".letter", {
  scrollTrigger: {
      trigger: ".letter",   
      start: "top 93%",
    },
    
    x: 0, 
    duration: 1,
    opacity: "94%",
    ease: "ease-in-out",
    delay: 1.2

});

 

[Cassie]

.letter {
  will-change: transform
}

 

Will change is a CSS property.

 

gsap.to(".letter", {
  scrollTrigger: {
      trigger: ".letter",   
      start: "top 93%",
    },
    
    x: 0, 
    duration: 1,
    opacity: "94%",
    ease: "ease-in-out",
    delay: 1.2
    force3D: true,
});

force3D is a GSAP property

I agree with Nico though. go through with a toothpick and comment things out/in until you figure out the issue. 💡