Question

I am familiar with the jQuery animate function and I have also gone through the various jQuery UI easing functions. Unfortunately none of them appear as the same animation effect I’m looking for so is it possible to create your own easing functions?

The animation I am attempting can be seen on the Apple Mac webopage with the dynamically loaded products widget at the top. The initial items appear to slide in from the top and then give a bounce-back effect after landing in place. Is it possible to recreating this easing style using custom jQuery code? Or possibly build your own 3rd party easy functions?

I’ve included a screen of what I’m talking about and hopefully somebody can offer a solution. Thanks in advance 🙂

Answer 1

See my demo here

The main idea is performing 2 continuous animations using easeOutCubic effect:

HTML:

<div class='left'></div>
<div class='center'></div>
<div class='right'></div>

JS:

$('div.left').animate({top: 410, left: 10}, 300, "easeOutCubic", function(){
    $('div.left').animate({top: 400, left: 20}, 300, "easeOutCubic");
});

$('div.center').animate({top: 420}, 300, "easeOutCubic", function(){
    $('div.center').animate({top: 400}, 300, "easeOutCubic");
});

$('div.right').animate({top: 410, right: 10}, 300, "easeOutCubic", function(){
    $('div.right').animate({top: 400, right: 20}, 300, "easeOutCubic");
});