Jump to content
GreenSock

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

| GreenSock
162631

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. Note that the video is using GSAP 2 format.

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). Use the widget below to sign up (or if you’re already logged in, you’ll get immediate 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 1

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

Join the Club

Cook up some delightful animation today with a generous dose of GSAP.

- Team GreenSock


User Feedback

Recommended Comments

There are no comments to display.



Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Add a comment...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×