Flash

GreenSock Docs (HTML5/JS)

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.

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:

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.

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.