Elastic

Eases with an elastic effect either at the beginning (easeIn), the end (easeOut), or both (easeInOut). You can optionally configure the amplitude and period of the sine wave using the config() method, like:

TweenLite.to(obj, 1, {x:100, ease:Elastic.easeOut.config(1.1, 0.4)});

Or just use the defaults which work great in most cases:

TweenLite.to(obj, 1, {x:100, ease:Elastic.easeOut});

The first parameter, amplitude, should generally be more than 1 and it basically controls the strength of the effect (how far it overshoots). The second parameter, period, controls how tight the wave is (like how many times it goes back and forth) where the smaller the number, the tighter the wave which results in more cycles. The period parameter is typically a decimal, less than 1 (but it doesn't have to be).

Properties

easeIn : ElasticIn

[static] Eases using a sine wave that starts slowly and then accelerates over time

easeInOut : ElasticInOut

[static] Eases using a sine wave that starts slowly, then accelerates and then decelerates over time.

easeOut : ElasticOut

[static] Eases using a sine wave that starts fast and then decelerates over time.

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.1 updated 2018-05-30

Core

    Extras

      Plugins

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

        Help support GreenSock by becoming a member

        Join Club GreenSock