Jump to content
Search Community

Easing Request - Anticipate Ease

ElliotGeno test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

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.

 

 

 

See the Pen GJxYZx?editors=001 by pyrografix (@pyrografix) on CodePen

  • Like 6
Link to comment
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. 

Link to comment
Share on other sites

  • 1 year later...

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: 

See the Pen LRqkOr?editors=0010 by GreenSock (@GreenSock) on CodePen

  • Like 5
Link to comment
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: 

See the Pen LRqkOr?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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
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
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...