TweenMax not scrolling smoothly on tablets/smartphones

[novellino]

Hello,

I using ScrollMagic in my site in order to make an animation. You can see the animation here:

http://jsfiddle.net/VRBG2/2/

 

And the code I am using you can see in the jsfidde similar to this:

 

 var topToBottom = new TimelineMax()

.add(TweenMax.to("#section3", 1, {marginTop: "0"}));

 

var scene = new ScrollScene({

triggerElement: "#section1",

tweenChanges: true

})

.addTo(controller)

.setTween(topToBottom);

 

My problem is than on tablets/smartphones, iphone, iPad and Android this animation looks very bad. Is very slow and not smooth at all.

Does anyone see any problem in my code.

And should I use any other plugins for making this to work better in tablets/mobile?

 

Thanks in advance

[Carl]

Hi and welcome to the GreenSock forums. 

 

We regularly hear of fantastic results even on older mobile hardware.

It can greatly depend on how and what you are animating. 

For instance animating a 2D transform like translateY() (or simply y in GSAP) will perform MUCH better that animating marginTop or top. For an added boost you can set force3D:true to push your element onto a GPU layer for even better performance.

 

I wasn't able to test your fiddle properly on my phone as it seems the outer page wants to scroll but not the "result" in the iframe. Regardless, I modified your code to use y instead of marginTop

 

div_height = $("#section2").height();
  TweenLite.set($("#section3"), {y:-div_height, force3D:true});
  var controller = new ScrollMagic({
  globalSceneOptions: {
  triggerHook: "onLeave"
 }
});
     
var topToBottom = new TimelineMax()
.add(TweenMax.to("#section3", 1, {y:0}));

http://jsfiddle.net/mDTvX/2/

 

let us know if that works better for you.

[Jonathan]

Hello.. I just tested both links.

 

I tested on my Galaxy S3 (4.4.2) and on a Windows 8.1 ASUS tablet, in portrait and landscape view:

 

For the first jsfiddle link I only noticed slight pixel snapping, but it animated fine.

 

When I tested Carl's forked jsfiddle link.. using the y property .. it was very very smooth!

 

Test were done in:

• Android Stock Browser
• Google Mobile Chrome

[novellino]

Yes it is true it works much better now.

Thank you