javascript - jQuery.easing - easeOutCubic - emphasizing on the ease

Question

I'm using the jQuery easing plugin by Robert (http://gsgd.co.uk/sandbox/jquery/easing/) and I need to emphasizing or drag out the ease effect.

Basically, I want the ease effect to be really quick but then slow down greatly during the ease out.

I believe I can do this using jQuery.easing.easeOutCubic( null, current_time, start_value, end_value, total_time) but I can't figure out how to use it properly.

How can this be achieved?

Answer 1

You do not need an easing plugin to do custom easing with jQuery. You only need the source JavaScript code of the one easing function you are going to use.

Here is the easeOutCubic function obtained 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 following examples use a 375 pixel blue square with a slideToggle() of 3 second duration. You can alter the 3 seconds (3000 ms) duration to demonstrate the effect to your liking. I chose 3 seconds to make it slow enough to see the differences.)

Then you just put it inside your jQuery, something like this perhaps...

$(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
            );
        });

});

Here is a demo of the above code which contains the easeOutCubic function renamed as myEasing and applied to a slideToggle() cube with a 3 second duration.

http://jsfiddle.net/kJZxQ/

Ok, now to your issue: You said that you want "...the ease effect to be really quick but then slow down greatly during the ease out."

Here is a graph of easeOutCubic:

You have two options, you can manipulate the easing equation itself or we can see if some other easing function has a similar curve, but steeper (faster) until the ease out part.

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

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

As you can see, several curves are shaped similarly to (7)-easeOutCubic yet are steeper on the front end. Here are several examples...

---

(10)-easeOutQuart easeOutQuart Demo

---

(13)-easeOutQuint easeOutQuint Demo

---

(16)-easeOutExpo easeOutExpo Demo

---

It seems like the last one, easeOutExpo is the steepest stock function available. By comparing the differences in the equations contained above, we can also manipulate the easeOutExpo equation to steepen the curve even further.

This custom equation is ridiculously fast and then slows down tremendously...

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

Even more extreme than the last...

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

Duration increased on 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 being manipulated to enhance the effect and make your own fine adjustments accordingly.

I really think easeOutExpo is more like what you describe. Essentially, it's your easeOutCubic equation but only faster on the front and slower on the end.