Optimising an animation with force3D

[Bragolgirith]

Hello fellow greensock users.

I have a very simple use case where I need to translate and scale images from one place to another.

Currently I'm doing it like this:

// Tween to the new position, width and height
TweenMax.to($element, 1, {
   top: 500,
   left: 500,
   width: 800,
   height: 600
});

From what I understand, in order to enable hardware acceleration (and thus gain better performance f.i. on an iPad), i could replace the top and left attributes with x and y and set the force3D to true, like this:

// Reset the element position so that it is correcly positioned after the translation tween.
TweenMax.set($element,{top:0,left:0}); 
// Tween to the new position, width and height
TweenMax.to($element, 1, {
   x: 500,
   y: 500,
   force3D:true,
   width: 800,
   height: 600
});

My question is: should I additionally replace the width and height with scaleX and scaleY? (Will there be performance gains in doing so?)

 

And additionally: Is there a convenience function in TweenMax that will convert a target width and height (in pixels) to a target scaleX and scaleY (in percent)? I could, of course calculate them manually, just thought there might be a better alternative.

 

Thank you in advance,

Brago.

[Carl]

Yes, using force3D with x / y / scale will give smoother performance.

There is not a method in GSAP to convert width and height measurements to scale.

 

Its important to note that setting a scale on an element is not the same as changing its width and height.

 

See this example: http://codepen.io/anon/pen/XJbXqR