jquery - TweenMax not scrolling smoothly on tablets/smartphones -

i using scrollmagic in site in order make animation. can see animation here: http://jsfiddle.net/vrbg2/2/

and code using can see in jsfidde similar this:

 var toptobottom = new timelinemax()   .add(tweenmax.to("#section3", 1, {margintop: "0"}));   var scene = new scrollscene({    triggerelement: "#section1", }) .addto(controller) .settween(toptobottom); 

my problem on tablets/smartphones, iphone, ipad , android animation looks bad. slow , not smooth @ all. see problem in code. , should use other plugins making work better in tablets/mobile?

thanks in advance

try adding autoround:false

since animating margin-top css property, doesn't animate on sub-pixel level. using autoround:false animate on sub-pixel level .. i.e. margin-top: 100.9999px

example: http://jsfiddle.net/zb754q92/

var toptobottom = new timelinemax() .add(tweenmax.to("#section3", 1, {margintop: "0", autoround:false})); 

autoround part of gsap cssplugin

taken gsap cssplugin docs:

by default, cssplugin round pixel values , zindex closest integer during tween (the inbetween values) because improves browser performance, if you'd rather disable behavior, pass autoround:false in css object. can still use roundpropsplugin manually define properties want rounded.

if not notice difference on phone. might consider animating y property, way have gsap animate translatey() property. , use force3d:true, can animate using 2d or 3d transforms smoother animation.

hope helps! :)