ElliotGeno

Easing Request - Anticipate Ease

Recommended Posts

I created a new ease that I find myself using a heck of a lot. You could think of it kind of like a backwards Back ease but with some additional smoothing towards the opposite end of the ease.

 

I call it Anticipate.

 

Its great for cartoonish-like motion where there is a build-up followed by a follow through. Picture a baseball player winding up for a pitch and then letting the ball go and it slowly comes to a stop in space. The ball would momentarily go backwards and then fly fast for a while until it came slowly to a stop. This type of animation is a lot more organic than your typical Back.easeOut.

 

If you'd like to try it out... I modified a version of TweenMax to include this ease:

TweenMax With Anticipate Ease

 

Or just fork the CodePen demo.

 

 

 

  • Like 6

Share this post


Link to post
Share on other sites

This looks exactly like the kind of ease I've been wanting. Back.easeIn sometimes needs a smooth easeOut and there it is - great work :)

  • Like 1

Share this post


Link to post
Share on other sites

Nice! Did you use the custom ease plugin that @frux posted the other day, or just modify the Back ease?

I just modified the existing Back.easeOut and Back.easeIn. They are essentially split it in two and reversed. The other half is actually the Expo ease if I remember correctly. It seemed to be the closest to the the speed of the Back motion.

  • Like 1

Share this post


Link to post
Share on other sites

Hopefully we can get this ease added to the code base! Although I heard rumors Jack has other plans for easing. So I am not sure about the likelihood of that.

Share this post


Link to post
Share on other sites

Cool demo and great ease. I'm a big fan of Back eases and this adds a nice touch for sure.

Share this post


Link to post
Share on other sites

Cool demo and great ease. I'm a big fan of Back eases and this adds a nice touch for sure.

What's the chances of getting something like this added?

  • Like 1

Share this post


Link to post
Share on other sites

We're hesitant to add a new ease to the core before we have an official Custom Ease solution in place. 

I noticed that your ease does use the same config() method as Back (cool) which allows you to set how far back the Back part is like

 Anticipate.easeOut.config(10)

It would be more ideal if you could configure multiple parameters, like SlowMo and RoughEase, so that you could perhaps configure the amount of anticipation, the strength of the easeOut... stuff like that. 

 

Again, your ease is very cool (and clever) but we're just very swamped at the moment and have a lot of other new tools and features that we're dying to get into the API first. 

Share this post


Link to post
Share on other sites

Looking at the new CustomEase that GSAP has introduced.

Are we able to recreate this without adding a the AnticipateEase plugin?

Share this post


Link to post
Share on other sites

Hi Venn,

 

I'm not sure what you mean by "AnticipateEase plugin", but CustomEase will allow you to create any ease you want.

Our new version of the Ease Visualizer make it pretty easy to draw the type of ease used in Elliot's demo.

We are not planning this time to make a special configurable ease for the anticipate effect.

 

CustomWiggle (which is also coming soon) has an anticipate style: http://codepen.io/GreenSock/pen/LRqkOr?editors=0010

  • Like 5

Share this post


Link to post
Share on other sites

Hi Venn,

 

I'm not sure what you mean by "AnticipateEase plugin", but CustomEase will allow you to create any ease you want.

Our new version of the Ease Visualizer make it pretty easy to draw the type of ease used in Elliot's demo.

We are not planning this time to make a special configurable ease for the anticipate effect.

 

CustomWiggle (which is also coming soon) has an anticipate style: http://codepen.io/GreenSock/pen/LRqkOr?editors=0010

 

Thanks Carl. Yes the custom ease visualizer achieve what AnticipateEase effect that Elliot's has done. Thanks for the tip.

 

WOW! CustomWiggle looks awesome! Can't wait.

  • Like 2

Share this post


Link to post
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

  • Recently Browsing   0 members

    No registered users viewing this page.