Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
eladla

Animation slow on new iOS devices

Recommended Posts

Hello all,

I am new to GreenSock and the forum. I must say I am loving it!

 

We are doing a Cordova mobile app with React. We started using GSAP for all the animations.

This works great in Ripple and also physical Android devices. Even older Android devices, which we were sure were going to be a problem, everything is running super smooth.

 

The problem is with iOS devices. We have tried iPhone 5S with both iOS 8.x.x and 9.x and also iPhone 6 and 6 Plus and on all of them performance is really bad. Animations are chopping up and stuttering all over the place.

I tried adding the translate3d transform and also adding force3D to the options object and nothing helps.

 

In the codepen the red div slides down more than one screen length and I know this is a lot of pixels to animate, but what works fine on an S3 I would expect to work better on an iPhone 6.

 

Any tips for me?

 

Thanks!

 

See the Pen qOgOvj by anon (@anon) on CodePen

Link to comment
Share on other sites

Hm, I tried it on one of my iOS devices and it ran perfectly smoothly but I'll offer a few tips:

  1. Try setting force3D:false. Why? Because you're changing the "height" on every tick which invalidates the bitmap/texture that was pushed to the GPU through layerization...over...and over. Think of it as if the browser wants to take a photo of the element and upload that to the GPU whenever there's a 3D transform (which is what happens when force3D is true or "auto"). That takes a little bit of time. But once it's on the GPU, it's SUPER fast to just stretch/rotate/move the pixels in that photo. However, if you actually change the physical dimensions of the original (or any property that'd affect its raw pixels), it must re-capture and upload that photo/texture. If you use scaleY, that just stretches the existing pixels whereas if you animate "height", it's literally fabricating new pixels altogether. The former is super fast, the latter takes longer. 
  2. If there's any way you can recreate the effect you're after without using expensive properties that affect layout, do it. For example, use scaleY instead of "height", or maybe try animating "clip". Set position to "absolute" and shift things around manually instead of relying on the browser to recalculate styles and re-layout the page on every tick. 
  3. See if defining a z-index on all your elements helps. I've seen Safari act a bit strangely with regard to z-index and it helped when it was specifically defined.
  4. Make sure you don't have debugging mode on on your testing devices - that may be what's causing the apparent slowdown. 
  5. Make sure you're using the latest version of GSAP. Beware that CDNJS has been unable to get CloudFlare to purge their cache, so the "/latest/" directory isn't really the "latest". I'd recommend switching to a particular version number, like https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js

Let us know if any of that helps things. I'm kinda surprised to hear you're having such trouble - we usually hear that GSAP runs really well on iOS devices. In my tests, it seems rock solid. 

  • Like 3
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×