JQuery.easing - easeOutCubic - emphasizing ease

Question

I am using Robert's jQuery easing plugin ( http://gsgd.co.uk/sandbox/jquery/easing/ ) and I need to emphasize or pull out the lightness effect.

Basically, I want the simplicity effect to be very fast, but then slow down significantly during ease.

I believe I can do this with jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time) , but I cannot figure out how to use it correctly.

How can this be achieved?

Answer 1

You don't need the easing plugin for user simplification with jQuery. All you need is the JavaScript source code for the easing function you are going to use.

Here is the easeOutCubic function derived from the jQuery UI source code. See this thread for more .

 $.easing.easeOutCubic = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; } 

Now you can edit the function and / or rename it ...

 $.easing.myEasing = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; } 

(All of the examples below use a 375-pixel blue square with a slideToggle() length of 3 seconds. You can change the duration to 3 seconds (3000 ms) to show the effect to your liking. I selected 3 seconds to make it slow enough to see the differences.)

Then you just put it in your jQuery, something like this, maybe ...

 $(document).ready(function(){ $.easing.myEasing = function (x, t, b, c, d) { return c*((t=t/d-1)*t*t + 1) + b; } $("#button").click(function() { $('#myDiv').slideToggle( 3000, // <-- Animation Duration (3000 ms) 'myEasing' // <-- the Name of your easing function ); }); }); 

The following is a demo containing the easeOutCubic function, renamed myEasing and applied to the slideToggle() cube for 3 seconds.

http://jsfiddle.net/kJZxQ/

Well, now to your problem: you said you want "... the effect of lightness, to be really fast, but then slow down significantly during ease."

Here is the easeOutCubic graph:

You have two options: you can control the attenuation equation itself, or we can see if any other attenuation function has a similar curve, but steeper (faster) until the part is released.

This demo page visually shows you all the attenuation curves ...

http://api.jqueryui.com/easings/

As you can see, several curves have a shape similar to (7) - easeOutCubic , but even cooler on the front side. Here are some examples ...

---

(10) - easeOutQuart easeOutQuart Demo

---

(13) - easeOutQuint easeOutQuint Demo

---

(16) - easeOutExpo easyOutExpo Demo

---

It seems the latter, easeOutExpo is the coolest stock function available. By comparing the differences in the above equations, we can also manipulate the easeOutExpo equation to further easeOutExpo curve.

This customizable equation is ridiculously fast and then slows down significantly ...

http://jsfiddle.net/kJZxQ/11/

Even more extreme than the last ...

http://jsfiddle.net/kJZxQ/12/

Duration increased by the last demo to 6 seconds to exaggerate the effect ...

http://jsfiddle.net/kJZxQ/13/

By comparing the mathematical equations of the above demonstrations, you can see which variable is controlled in order to improve the effect and make your own minor adjustments accordingly.

I really think that easeOutExpo more like what you are describing. Essentially, this is your easeOutCubic equation, but only faster in front and slower at the end.