CustomEase

Are your animations meant to feel playful? Robotic? Slick? Realistic? If they had a voice, what would they sound like? To become an animation rock star, you must develop a keen sense of easing because that's what determines the style of movement between point A and point B. GreenSock's new CustomEase frees you from the limitations of canned easing options. Create literally any ease imaginable. Zero limitations.

CSS animations and WAAPI offer cubic-bezier() which is great but with only two control points it's impossible to create more complex effects like bouncing, elastic, wiggles, rough/jerky eases, etc. Plus you can't make an ease return to its starting values (like a ball jumping into the air and falling back to the ground with a bounce).

Features

  • Unlimited anchors and control points.
  • Copy/Paste any SVG <path> (including directly from Adobe Illustrator).
  • Use CSS cubic-bezier() values (For example, from cubic-bezier.com).
  • Editor has snapping, undo, sample code and other conveniences.
  • Start with any standard ease and customize it.
  • getSVGData() method turns any ease into SVG <path> data for display at the size you define.
  • Extremely optimized for runtime performance.
  • Free for anyone with a GreenSock account.

Reading Ease Curves, Editing, and Using CustomEase

Here's an in-depth video tour that'll get you up to speed with exactly how to use CustomEase:

Ready to play? Check out the new Ease Visualizer with CustomEase support. Edit the curve as much as you want:

Simple Example

We strongly recommend creating your CustomEases initially (rather than in each tween) to maximize performance and readability. You then reference them by ID in your tweening code. When an ease is created, it must parse through the points and do various calculations to prepare for blisteringly fast runtime performance during the animation, so executing those calculations when your page/app loads is typically best.

More examples

See the Pen CustomEase Demo Explorer by GreenSock (@GreenSock) on CodePen.

Download CustomEase

To get 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). The widget below lets you sign up or if you're already logged in, it'll give you immediate access to the download zip that contains CustomEase in the "easing" directory. Note: CustomEase is not in the github repository or CDN; it's only available for download at GreenSock.com.

Get GSAP

Version: 1.20.3 updated 2017-10-02

Core

    Extras

      Plugins

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

        For an all-access pass to premium content

        Join Club GreenSock