Jump to content
Search Community

Optimising an animation with force3D

Bragolgirith test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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.
// Tween to the new position, width and height
TweenMax.to($element, 1, {
   x: 500,
   y: 500,
   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,


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.
  • Create New...