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

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.