CustomEase

Included in TweenMax: NO

CustomEase frees you from the limitations of canned easing options; create literally any easing curve imaginable by simply drawing it in the Ease Visualizer or by copying/pasting an SVG path. Zero limitations. Use as many control points as you want.

The easiest way to create a CustomEase is to click the "Custom" link in the Ease Visualizer (below) and then edit the curve.

  • Add points - ATL/OPTION-click anywhere on the curve
  • Delete points - Select the point and then press the DELETE key on the keyboard
  • Toggle smooth/corner - ALT/OPTION-click on an anchor point. Or, ALT/OPTION-drag a control handle to turn it into a corner (not smooth) point.
  • Select multiple points - Hold the SHIFT key while clicking anchor points.
  • Undo - Press CTRL-Z
  • Disable snapping - Hold SHIFT while dragging

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
 
 
// click and modify the underlined values
 
TweenLite.to(, , { 
 
  
ease: .create("custom", "M0,0,C0.126,0.382,0.282,0.674,0.44,0.822,0.632,1.002,0.818,1.001,1,1"),
 
  
y: -500 
     
});
 
   // *Requires CustomEase which can be downloaded at greensock.com/customease (not the CDN or github).  

Copy/Paste SVG

When in the "custom" mode of the Ease Visualizer, you can select the orange text at the bottom (the CustomEase data string), highlight it all, and then paste in an SVG path (like from Adobe Illustrator) and then click elsewhere and the Ease Visualizer will grab the first <path> and convert it into the proper format.

Using cubic-bezier values

CustomEase also recognizes standard cubic-bezier() strings containing four numbers, like those you can get from cubic-bezier.com. For example, ".17,.67,.83,.67". Either paste that into the orange text area in the bottom of the Ease Visualizer or feed it directly into the CustomEase.create() method, like CustomEase.create("easeName", ".17,.67,.83,.67");.

The code

Instead of using the long data string in each tween, you simply create() a CustomEase once (typically as soon as your page/app loads) and assign it a memorable ID (like "hop" or "wiggle" or whatever you want) that you reference thereafter in any of your tweens, like:

//define your CustomEase and give it an ID ("hop" in this case)
CustomEase.create("hop", "M0,0 C0,0 0.056,0.442 0.175,0.442 0.294,0.442 0.332,0 0.332,0 0.332,0 0.414,1 0.671,1 0.991,1 1,0 1,0");

//now you can reference the ease by ID (as a string):
TweenLite.to(element, 1, {y:-100, ease:"hop"});

Creating the ease(s) initially ensures maximum performance during animation because there's some overhead involved in calculating all the points internally and optimizing the data for blisteringly fast runtime performance. That only happens once, upon creation.

Typically the path string uses normalized values (0-1), but you can pass in any SVG path data that uses cubic bezier instructions ("M", "C", "S", "L", or "Z" commands) and it'll normalize things internally.

Download CustomEase

You must have a GreenSock account which is completely free to set up. Plus it gets you access to our community forums (a fantastic place to learn and get your questions answered). Simply log into your GreenSock account and get it from the "Downloads" area of your Account Dashboard. Or use the widget at the bottom of the https://greensock.com/customease page to sign up and get the CustomEase file. It's in the "easing" directory. Note: CustomEase is not in the github repository or CDN; it's only available for download at GreenSock.com.

Methods

create : CustomEase

Creates a CustomEase instance

get : CustomEase

Gets the CustomEase instance associated with the ID provided.

getRatio : CustomEase

Converts a linear progress value (0-1) into the corresponding eased value.

getSVGData : String

Calculates the SVG <path> data string for visualizing the supplied ease graphically.

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: 1.20.3 updated 2017-10-02

Core

    Extras

      Plugins

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

        Help support GreenSock by becoming a member

        Join Club GreenSock