HTML5 / JS

Flash

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).

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

See the Pen <a href='http://codepen.io/GreenSock/pen/84d89c6dc09205ec564b151966af7dea/'>Video: Single Tween with CustomEase</a> by GreenSock (<a href='http://codepen.io/GreenSock'>@GreenSock</a>) on <a href='http://codepen.io'>CodePen</a>.

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

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.

SpaceLamb takes flight and its your mission to guide him through an asteroid field in search of powerups! Checkout the power of GSAP when used with Three.js. Silky smooth with lots of great lighting and effects.

“ Go and browse through FWA or Awwwards, then view source of anything you see that has cool animation and you will be surprised how widely GSAP is used. ”

“ This stuff is so incredibly amazing I can't believe it. The level of details and options put into these things and the natural instinct GreenSock has for solving everyday problems is impressive. ”

Jens Ahrengot Boddum

“ GreenSock is the best thing that happened to SVG animations since SVG animations. ”

Sara Soueidan

“ No other animation library is as intuitive, rigorous, conceptually simple and well curated as GreenSock’s ”

Robert Anthony

“ GSAP makes my job fun, because it allows me to focus on creating rich, engaging web experiences, while GSAP handles much of the implementation details behind the scenes. ”

Tim Jaramillo

“ The GreenSock animation platform is one of the most useful sets of tools in existence when it comes to web animation. ”

Ben Rugg

“ If every library were as robust and reliable as GreenSock’s, the world would be a much better place for software engineers and their clients. I can't think of a better designed or better performing tool, and as a bonus, it's fun as heck to play with. ”

Thomas Summerall

Thanks for signing up!

Now you'll begin receiving the latest GreenSock updates, exclusive offers, and more right in your inbox. Welcome aboard.