ExpoScaleEase

Added in version: 1.20.4

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.

Simple Demo

Complex Demo

Methods

config( startingScale:Number, endingScale:Number, ease:Ease [optional] ) ;

Returns an ease that's built specifically for the starting and ending values you define. By default, it uses a Linear.easeNone ease, but you can optionally define a different one in the 3rd parameter, like Power2.easeInOut.

getRatio( progress:Number ) ;

Converts a linear progress value between 0 and 1 (where 0 is the start, 0.5 is halfway through, and 1 is completion) into the corresponding eased value (typically also between 0 and 1, although some eases like Elastic and Back shoot past those values and then return)

Copyright 2017, GreenSock. All rights reserved. This work is subject to theterms of useor for Club GreenSock members, the software agreement that was issued with the membership.

Get GSAP

Version: 2.0.2 updated 2018-08-27

Core

    Extras

      Plugins

        By using GreenSock code, you agree to the terms of use.

        For an all-access pass to premium content

        Join Club GreenSock