Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

GreenSock Docs


Included in GSAP core: No


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


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:

  1. //we're starting at a scale of 1 and animating to 2, so pass those into config()...
  2. 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:

  1. //scale from 0.5 to 3 using Power2.easeInOut ...
  2. 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.

Simple Demo

Complex Demo
