There's an interesting phenomena that occurs when you animate an object's scale that makes it appear to change speed even with a linear ease; ExpoScaleEase compensates for this effect by bending the easing curve accordingly. This is the secret sauce for silky-smooth zooming/scaling animations.
Video Explanation
config()
In order for ExpoScaleEase to create the correct easing curve, you must pass in the starting and ending scale values to the config()
method, like:
//we're starting at a scale of 1 and animating to 2, so pass those into config()... TweenMax.to("#image", 1, {scale:2, ease:ExpoScaleEase.config(1, 2)});
It can also accept a 3rd parameter, the ease that you'd like it to bend (the default is Linear.easeNone
). So, for example, if you'd like to use Power2.easeInOut
, your code would look like:
//scale from 0.5 to 3 using Power2.easeInOut ... TweenMax.fromTo("#image", 1, {scale:0.5}, {scale:3, ease:ExpoScaleEase.config(0.5, 3, Power2.easeInOut)});
Note: the scale values passed into the config() method must be non-zero because the math wouldn't work with 0. You're welcome to use a small value like 0.01 instead. Using a SUPER small number like 0.00000001 may not be ideal because a large portion of the tween would be used going through the very small values.