Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

| GreenSock
189712

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 (note that the video is using GSAP 2 format):

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

Get CustomEase by creating a FREE GreenSock account which gets you access to our community forums plus you’ll receive our exclusive “GreenSock Insider” email series (you can unsubscribe anytime). Make sure you're logged in, then you’ll get immediately gain access to the download zip containing CustomEase. Note: CustomEase is not in the GitHub repository or CDN; it's only available for download at GreenSock.com.

  • Like 2

Get an all-access pass to premium plugins, offers, and more!

Join the Club

We love seeing what you build with GSAP. Don't forget to let us know when you launch something cool.

- Team GreenSock


User Feedback

Recommended Comments

alankarmisra

Posted

On 3/7/2020 at 12:35 PM, alex_onteractive said:

I still can't find which file that I can load the customease class

Hopefully you figured this out on your own but for anyone else wondering, register on the site for free, then login, then download the GSAP zip file from Docs > Installation which will automatically include the bonus plugins (including customease). Customease is NOT available on CDN. So you need to download the zip file. If you prefer, you can still use gsap core from CDN, but you'll have to load customease.min.js from your local/site directory.

  • Like 1

Share this comment


Link to comment
Share on other sites
On 3/7/2020 at 9:05 AM, alex_onteractive said:

I still can't find which file that I can load the customease class

Me 2 ... and the tutorial does not help me either cuz i can't find the same file as in the tutorial , pls help :) 

Share this comment


Link to comment
Share on other sites


Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

×