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).
- Unlimited anchors and control points.
Copy/Paste any SVG
<path>(including directly from Adobe Illustrator).
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:
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.
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.