ExpoScaleEase
Quick Start
CDN Link
gsap.registerPlugin(EasePack)
Minimal usage
// 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: "expoScale(1, 2)" });
This ease is in the EasePack file. To learn how to include this in your project, see the Installation page.
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
Configuration
In order for ExpoScaleEase to create the correct easing curve, you must pass in the starting and ending scale values in the string, 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: "expoScale(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.inOut"
, your code would look like:
//scale from 0.5 to 3 using "power2.inOut" ...
gsap.fromTo(
"#image",
{ scale: 0.5 },
{ duration: 1, scale: 3, ease: "expoScale(0.5, 3, power2.inOut)" }
);
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.