How to make animation easing (ease-in and ease-out) duration-independent?

Question

I'm using jQuery with Easing plugin and i would like to achieve constant easing times for for animations of any duration:

Short animation (X milliseconds)
|<<<<|-------------------|>>>>|
 10ms                     10ms

Long animation (2X milliseconds)
|<<<<|-----------------------------------------|>>>>|
 10ms                                           10ms

Where <<<< / >>>> are easing-in / easing-out periods, and --- denotes constant velocity movement.

Is there an easing function/plugin for that or should i give a time-dependent custom function for each animation like this and, if yes, then what kind?

Jasper · Accepted Answer · 2016-11-11T19:44:30.590

5

You can use the callback function in the .animate() calls to chain animations:

var $obj     = $('#some-id'),
    ani_dist = 500;

//animate first easing
$obj.stop().animate({ left : 100 }, 500, 'easeOutCirc', function () {

    //animate main body of the animation
    $obj.animate({ left : (ani_dist - 100) }, 1000, 'linear', function () {

        //animate the last easing
        $obj.animate({ left : ani_dist }, 500, 'easeInCirc');
    });
});

I'm not sure what you want to set the animation to animate or what duration to use but there's an idea.

edited Nov 11 '16 at 19:44

answered Jan 11 '12 at 17:50

Jasper

75,717
14
151
146

That is a solution i thought about, too, but the problem is that for longer and smoother animations it's difficult to fit an easing function on both ends — there's always a bit of a wobble on the "connection points". Is there an easing-in function graph that ends in a 45 degree line, while starts horizontally? – Ernests Karlsons Jan 11 '12 at 18:01
@ErnestsKarlsons Here are some graphs of the different easing types: http://jqueryui.com/demos/effect/easing.html – Jasper Jan 11 '12 at 18:03
Stupid, just needed to look them up. For some reason i was sure that there is nothing suitable. Sorry and thanks for a fast answer! – Ernests Karlsons Jan 11 '12 at 18:08

score 0 · Answer 2 · answered Jul 21 '13 at 12:08

I think you should use the animate queen

//animate first easing
$obj.stop()
    .animate({ left : 100 }, 500, 'easeOutCirc')
    .animate({ left : (ani_dist - 100) }, 1000, 'linear')
    .animate({ left : ani_dist }, 500, 'easeInCirc')
;

See jQuery.animate example-2

How to make animation easing (ease-in and ease-out) duration-independent?

2 Answers2