iPhone/iOS choppy timeline animation during scroll

[Paul Yabsley]

I have a timeline animation which transforms text in from offscreen. The timeline is scroll triggered.

On iOS, during scroll the transform is choppy/stutters. Only seems to happen during scroll.

 

I'm told by colleagues using android devices that it isn't happening there. Also the animation is smooth in desktop browsers during scroll.

 

This is the codepen debug view https://cdpn.io/pen/debug/jORZZYj?authentication_hash=mWAoNBaVOzVr

Any help would be massively appreciated.

See the Pen jORZZYj by paulyabsley (@paulyabsley) on CodePen

[Rodrigo]

Hi,

 

I tested on an iPad running iOS 17.2 can't see the problem in neither Chrome nor Safari. You can try using will-change: transform; in the elements CSS and see if that helps.

 

Also you can try using ScrollTrigger's normalizeScroll in order to have everything on the same thread:

https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.normalizeScroll()

 

Hopefully this helps.

Happy Tweening!

[Paul Yabsley]

Hey thanks for checking. Unfortunately I don't have an ipad to test on. Only an iPhone. I've created a fork of the pen where the images are uncommented and this makes the choppiness more exaggerated in my testing. 

See the Pen qBwoaVz?editors=0010 by paulyabsley (@paulyabsley) on CodePen

 It also has will-change:transform; applied to the .word elements but that doesn't seem to resolve the issue.

 

I've also tried setting ScrollTrigger.normalizeScroll(true) (currently commented out in the above pen) which does get rid of the choppiness but I'm not sure the side effects of that (disabling native scroll) are what we want. Seems a bit heavy handed. Very curious why it happens in iOS but not desktop browsers and (I'm told) not on Android devices. 

 

In the attached screen recording you can see the issue in the first flick scroll. In the second I scroll and stop and you can see the words transform smoothly.

 

A frustrating bug for sure. Thanks again for your help.

[GreenSock]

I had a very difficult seeing any issue even in your video. 🤷‍♂️

 

6 hours ago, Paul Yabsley said:

Very curious why it happens in iOS but not desktop browsers and (I'm told) not on Android devices. 

iOS is absolutely TERRIBLE with scroll-related things. There are a bunch of bugs in the browser itself, some of which were reported years ago and still haven't been fixed. It's unbelievable to me. 

 

If I remember correctly, iOS runs the requestAnimationFrame() updates at only 30fps instead of 60fps in certain scenarios, like in an iframe, until the user interacts with it (taps or drags or does something like that). I assume they're trying to "optimize" things to reduce battery drain. But of course that has very annoying side effects. 

 

What's very odd to me when I glanced at your code was that you're attaching a ScrollTrigger to a timeline, thus it by default will use toggleActions, but you're controlling that very same timeline inside of the onEnter/onLeave/onEnterBack/onLeaveBack. Why are you even attaching the ScrollTrigger to that timeline itself? It seems counter-intuitive, since you're potentially fighting with toggleActions. Why not just do a normal ScrollTrigger.create()? 

 

ScrollTrigger.create({
  trigger: middle,
  start: "top 40%",
  end: "+=" + (middle.offsetHeight / 1.5),
  markers: true,
  onEnter: () => {
    tl.timeScale(1).play();
  },
  onLeave: () => {
    tl.timeScale(3).reverse();
  },
  onEnterBack: () => {
    tl.timeScale(1).play();
  },
  onLeaveBack: () => {
    tl.timeScale(3).reverse();
  },
});

(Do that instead of putting it in the gsap.timeline({...}))

 

In any case, the overall issue here really doesn't seem GSAP-related. It sounds like challenges related to iOS itself. 

[Paul Yabsley]

8 hours ago, GreenSock said:

I had a very difficult seeing any issue even in your video. 🤷‍♂️

Ha fair enough, its quite subtle in the demo I admit. Its a lot worse on the actual working project.

Quote

What's very odd to me when I glanced at your code was that you're attaching a ScrollTrigger to a timeline, thus it by default will use toggleActions, but you're controlling that very same timeline inside of the onEnter/onLeave/onEnterBack/onLeaveBack. Why are you even attaching the ScrollTrigger to that timeline itself?

Just a bad developer 😂 cheers for the heads up, makes sense, I'll change it! 

Quote

In any case, the overall issue here really doesn't seem GSAP-related. It sounds like challenges related to iOS itself. 

Yeah I agree, seems like its an iOS issue. Thanks again for your help.