Included in GSAP core: No
Description
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()...gsap.to("#image", {duration: 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 “none”). 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 ...gsap.fromTo("#image", {scale: 0.5}, {duration: 1, 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.