Easing


GreenSock Ease Visualizer

Hints

Add point: ALT-CLICK on line

Toggle smooth/corner: ALT-CLICK anchor

Get handle from corner anchor: ALT-DRAG

Toggle select: SHIFT-CLICK anchor

Delete anchor: press DELETE key

Undo: CTRL-Z



progress


value
1.00
Power0
Power1
Power2
Power3
Power4
Back
Elastic
Bounce
Rough
SlowMo
Stepped
Circ
Expo
Sine
Custom
Type:
// click and modify the underlined values
TweenLite.to(, , {
  
ease: .,
  
y: -500
});
// *Requires CustomEase which can be downloaded at greensock.com/customease (not the CDN or github).


Configure your own bounce ease with squash and stretch

Creates highly configurable wiggle eases.

Allows you to create literally **ANY** ease by simply drawing it in the Ease Visualizer or by copying/pasting an SVG path. Unlimited control points.

Most easing equations give a smooth, gradual transition between the start and end values, but SteppedEase provides an easy way to define a specific number of steps that the transition should take.

SlowMo is a configurable ease that produces a slow-motion effect that decelerates initially, then moves linearly for a certain portion of the ease (which you can choose) and then accelerates again at the end; it's great for effects like zooming text onto the screen, smoothly moving it long enough for people to read it, and then zooming it off the screen

Most easing equations give a smooth, gradual transition between the start and end values, but RoughEase provides an easy way to get a rough, jagged effect instead, or you can also get an evenly-spaced back-and-forth movement if you prefer.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 4 which is identical to the Power4 ease.

Eases with a relatively low power either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 4 which is identical to the Power4 ease.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 3 which is identical to the Power2 ease.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 1 which is identical to the Power1 ease.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 4 which is identical to Quint and Strong but with a more intuitive name.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 3 which is identical to Quart but with a more intuitive name.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 2 which is identical to Cubic but with a more intuitive name.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 1 which is identical to Quad but with a more intuitive name.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 0 which is identical to Linear but with a more intuitive name.

Linear ease with no acceleration or deceleration. Linear is identical to Power0.

Eases in a strong fashion either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Eases with an elastic effect either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

EaseLookup enables you to find the easing function associated with a particular name (String), like "strongEaseOut" which can be useful when loading in XML data that comes in as Strings but needs to be translated to native function references.

Provides an easeIn, easeOut, and easeInOut with a power (or strength) of 2 which is identical to the Power2 ease.

Eases, bouncing either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Eases with an abrupt change in velocity either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

Eases with an overshoot either at the beginning (easeIn), the end (easeOut), or both (easeInOut).

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