Jump to content
GreenSock

GreenSock Docs

ExpoScaleEase

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:

  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

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.
×