16

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 :)

Mac animated menu

highlighted graphics

Jake
  • 1,285
  • 11
  • 40
  • 119
  • 2
    Have a look at this - http://stackoverflow.com/questions/5916058/jquery-easing-function-variables-comprehension it should help you to understand how to build or add an easing type to the easing functions. http://forrst.com/posts/How_to_create_custom_jQuery_easing_functions-OKb – Jay Blanchard Jan 22 '13 at 16:20
  • Anyone looking into this the animation javascript on the page is at http://images.apple.com/global/scripts/productbrowser.js and animation is added at line addVendorEventListener("animationStart",m); for each of elements in product grid. – Farrukh Subhani Jan 27 '13 at 22:24
  • 1
    The fact that the example page you gave doesn't work the same in IE (below ver. 10) suggests it's actually (mostly) CSS animated. Just a few items are actually animated using JavaScript/JQuery, such as individual DIVs containing product categories sliding into view, and that caret at the bottom also seems to be animated by using JS. Have a look at the [Animate.css examples](http://daneden.me/animate/) to see if any of those would fit your needs or if you could _'roll your own'_ based on CSS animation/transformation techniques described therein. – TildalWave Jan 27 '13 at 23:37
  • 1
    @FarrukhSubhani - Looks like it is accomplished via CSS animation: http://images.apple.com/global/styles/productbrowser.css `Line 169` to `Line 340` – Derek 朕會功夫 Jan 28 '13 at 04:50
  • 1
    @Derek thank you this does appear to be correct.. I was fairly confident this animation was built on JS but I'll have to play around using the source code. – Jake Jan 28 '13 at 15:59
  • @Derek I'm looking through all the keyframes and unfortunately I am very unfamiliar with this technique. Do you have any recommended articles to check out? I am just struggling to understand how they force the animation to load right after the DOM finishes. Usually CSS3 animations require some type of event like hover or focus. But keyframes must be a different story - I'll keep digging but thanks so much for all your help. – Jake Jan 28 '13 at 19:55
  • @JakeRocheleau - MDN has an [article on CSS animation](https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations) and it did a great job explaining it. – Derek 朕會功夫 Jan 29 '13 at 02:44

1 Answers1

23

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");
});
phnkha
  • 7,782
  • 2
  • 24
  • 31
  • This is a good solution with jQuery thanks. Enjoy the bounty! I will open another question in search for a solution using CSS3 keyframes. – Jake Jan 29 '13 at 16:33