Jump to content
Search Community

Easing with custom InOut ratio and Power

jniac 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 think it could be a great feature to allow fine ease function which could be less optimized but will enable some transition that are actually hard to perform.

 

Well, i'll give an example :

Quite often i feel the need of a transition with a short and strong acceleration followed by a long and smooth deceleration. Power[0,1,2,3,4] currently only let me choose similar acceleration and deceleration (PowerN.easeInOut).

Why not embed a function that permit custom InOut ratio ?

Fine_Ease_small.png

(cf codepen)

 

This function could be something as following : 

function FineEase(i, p) {

    // i: inflection
    // p: power
    // x: value

    return function(x) {
        return x < 0 ? 0 : x > 1 ? 1 : x < i ?
            1 / Math.pow(i, p - 1) * Math.pow(x, p) :
            1 - 1 / Math.pow(1 - i, p - 1) * Math.pow(1 - x, p);
    };

}

 

Gimme your feedbacks !

See the Pen aNeKaz by jniac (@jniac) on CodePen

Link to comment
Share on other sites

I don't think I've ever heard of someone wanting an ease that's stronger than Power4, and you're right - we put a heavy emphasis on optimization which is one of the reasons we didn't offer something like you're explaining, but I also see your point about offering a less optimized (but more flexible) option for the rare cases when someone needs it. That being said, we have some other exciting plans that would make this sort of thing irrelevant :) You'll have to wait and see about that, though. I can't explain too much yet. 

 

In the mean time, you're welcome to main your own easing function that does exactly what you're talking about. You can analyze the code in the other eases like Sine to see how to format things. Basically you need to make sure there's a getRatio() method that takes a progress value between 0 and 1 and spits back the converted eased value. 

 

Thanks for offering the suggestion. Feel free to keep telling us about ideas you have for improvement. 

  • Like 1
Link to comment
Share on other sites

Well with your secret plans you tease me !

 

May be i wasn't clear enough.

It wasn't a question a power, it was a question of... well... of asymmetric easeInOut curve.

In a transition, the way of PowerN.easeInOut performs, you always have the same time of acceleration and deceleration.

Sometimes it's better when it's not the case.

In After Effects a good motion designer, working on speed graph, would always give more acceleration than deceleration because the animation will looks generally more dynamic this way, like a dancer which gives strong impulse and then soft cushioning.

 

So my purpose was about a formula that will offer this opportunity to change the InOut ratio (and not the power ratio, which is also the case but not the main trick).

 

I've been testing performance in CodePen, it seems that FineEase has about the same performance than Power3.easeInOut.getRatio (sometimes x1.3 slower, sometimes x0.7 faster).

See the Pen aNeKaz?editors=1010 by jniac (@jniac) on CodePen

  • Like 2
Link to comment
Share on other sites

Glad you've got some solutions to choose from.

 

As for performance, remember not to just test the getRatio() function itself - one of the key optimizations we made in the engine was baking in support for the Power eases right inside the render loop, thus getRatio() doesn't even need to get called for Power functions. Skipping function calls helps. So if you're trying to measure performance, make sure you're doing it in the context of actual tweens. But honestly I doubt you'd ever notice a difference unless you're tweening hundreds (probably thousands) of things simultaneously. 

  • Like 1
Link to comment
Share on other sites

I'm quite a noob with a lot of things, i'm used to develop in my own neck of the wood (which is a bad habit), so i'm a noob with english, with community rule and habits. So i just notice that 'Jack' should probably be the 'Jack', founder of TweenMax ! Thus your announcement of exciting plans just boggles in my mind. I suppose there are no news about what / when / what for this is about ? For my part, if i was brave enough i would develop a TimeLine Visualizer that will allow to offset tween, edit ease and so on... Am i quite close to thoses secrets things you're developing ?

 

Anyway, all the best to your adventure.

  • Like 1
Link to comment
Share on other sites

Indeed it is JACK!

 

The CODE GOD OF GSAP! 

 

May his shining light and might burn us all into enlightenment! 

 

OoooooOOOOOOOOooooOOOOO! ! ! ! ! ! !

 

Put your sunglasses on lest his presence shall blind us AaAaaAALLLL!

Link to comment
Share on other sites

And he told me something !!!

It was... well... i can't even remember ! But that must be brilliant, i should take some notes, if only... but believe me ! He was right there, in this topic.

 

Maybe a little seriously, have anyone tried to work on speed rather than position ? A tween on derivative and not on value.

After Effects, once again let you do this. And sometimes it's useful. But it's usefull with a graph, maybe not with a script. Eg, doing a tween by defining a uniform acceleration... hm... in a way... let me think about it again.

Link to comment
Share on other sites

Funny, guys. I'm just a dork who geeks out over code. 

 

Anyway, yeah, we've got several plugins that allow you to set merely a velocity and/or acceleration and it'll handle the rest. Physics2DPlugin and PhysicsPropsPlugin specifically. And ThrowPropsPlugin adds another dimension, letting you optionally define an end position (or range or array of specific values and it'll pick the closest natural one) and then it'll glide to a stop. Super useful in some cases. 

 

And this stuff doesn't only work for x/y positional values (well, except for Physics2DPlugin which kinda makes sense). You can use it for pretty much any property. Rotation, width, yourCustomProperty, whatever. Once you get the hang of it, it can create some really fun and advanced effects with minimal code. ThrowPropsPlugin can even track the moment-by-moment velocity of any property so that you can feed in that velocity to your tweens. ThrowPropsPlugin.track(element, "propertyName"), then ThrowPropsPlugin.getVelocity(element, "propertyName") :)

 

Note: all of the plugins mentioned above are membership benefits of Club GreenSock. http://greensock.com/club/ 

Link to comment
Share on other sites

Here's a fun little ease. I'm not sure what it's really called. Something like "Second-order repsonse". It's a spring damping and velocity ease, and you can read about here...

http://www.cocoawithlove.com/2008/09/parametric-acceleration-curves-in-core.html

 

That's what I use to help blend animations, like this example...

See the Pen mepBam?editors=0010 by osublake (@osublake) on CodePen

 

Changing the values can dramatically change its behavior. Try to keep Zeta between 0-1, and Omega over 10. You can play around with it here. 

See the Pen 0ab4f5d0302c455d979e0a26388fe381?editors=0010 by osublake (@osublake) on CodePen

  • Like 4
Link to comment
Share on other sites

  • 2 weeks later...

Interesting stuff. The spring ease is quite impressive !

i'll keep an eye on it.

 

I was, and i'm still, a flash developper. To be honest, not really a flash developper, because it was not my job, i was designing and prototyping flash website for the advertising industry some years ago. But, even if i wasn't full time programming, i always liked to play with shapes, colors with code.

 

Needless to say that i quickly adopted TweenMax.

More than an useful tween framework, Greensock was a inspiring way of thinking. What is an animation ? What i would like to do with ?

The great range of parameters and options was and is still a good base to try defining a interactive animation. A f***ing interactive animation which could ever be paused, reversed, canceled at any time.

Far more complex than at first sight.

 

Once the core class (com.greensock.core.)Animation inspired me a strong class for handling navigation through an app (nested timeline with self progression ratio etc.).

 

These days i finally achieve to produce my first WebGL / ThreeJS / GSAP experience. The final website is not online (but will be soon).

The delay was quite short and i had all to learn (canvas, SVG, css, prototype...).

I got a fright last night: no more time to understand how to change CSS / SVG attributes dynamically, well, finally i referred entirely on TweenMax reporting to another day test and learning.

 

This is the standalone experience, all the tweens are made with GSAP:

http://hipoly.fr/tmp/wms/hexasphere/

 

Thanks guys to help reconverting myself from AS3 to Javascript!

Link to comment
Share on other sites

Interesting stuff. The spring ease is quite impressive !

i'll keep an eye on it.

 

I was, and i'm still, a flash developper. To be honest, not really a flash developper, because it was not my job, i was designing and prototyping flash website for the advertising industry some years ago. But, even if i wasn't full time programming, i always liked to play with shapes, colors with code.

 

Needless to say that i quickly adopted TweenMax.

More than an useful tween framework, Greensock was a inspiring way of thinking. What is an animation ? What i would like to do with ?

The great range of parameters and options was and is still a good base to try defining a interactive animation. A f***ing interactive animation which could ever be paused, reversed, canceled at any time.

Far more complex than at first sight.

 

Once the core class (com.greensock.core.)Animation inspired me a strong class for handling navigation through an app (nested timeline with self progression ratio etc.).

 

These days i finally achieve to produce my first WebGL / ThreeJS / GSAP experience. The final website is not online (but will be soon).

The delay was quite short and i had all to learn (canvas, SVG, css, prototype...).

I got a fright last night: no more time to understand how to change CSS / SVG attributes dynamically, well, finally i referred entirely on TweenMax reporting to another day test and learning.

 

This is the standalone experience, all the tweens are made with GSAP:

http://hipoly.fr/tmp/wms/hexasphere/

 

Thanks guys to help reconverting myself from AS3 to Javascript!

  • Like 2
Link to comment
Share on other sites

  • 1 year later...

hi everybody

I came to this thread as an after effects animator looking for good java script ease expressions with asymetrical Ins and Outs.

I tried the function of janiac, but the ease is not snappy enough. (if you increase the power to much, you won´t have any motion in the last frames at all)

I really love the ease feeling of this functions with a steepness of 7:

 

function expoOut (x,steepness){
    return (Math.exp(-steepness*x) - 1) / (Math.exp(-steepness) - 1);
}

function expoIn (x,steepness){
    return v = (Math.exp(steepness*x) - 1) / (Math.exp(steepness) - 1);

}

But my mathematical skills are not excellent enough converting this to one function with an In/Out ratio like janiac in the thread opening describes.

Is  such a function possible at all?

Thanks so much for any hints on that.

 

 

 

 

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