Ribbons often have a bouncy effect for an active element; let's make our elements bounce.
The previous two recipes set up the hard work for this recipe where we simply add a bouncy effect to the roll-over images. Review those for more information on how to create a slide-in ribbon and links that grow and shrink with the mouse movement of the user.
Transitions are what make MooTools really far superior. Use them in this recipe to make the growth and shrinkage quick and make them bounce!
// make the growth and shrinkage quick // and make them BOUNCE! $$('#ribbon a img').set('morph',{ duration:'long', // i can has mmm bop? transition:Fx.Transitions.Elastic.easeOut }); // add the events for mouseover $$('#ribbon a img').addEvents({ 'mouseenter':function() { grow_shrink(this,64); if (this.getParent().getPrevious()) var to_my_left = this.getParent().getPrevious().getFirst('img'); if (to_my_left) grow_shrink(to_my_left,48); if...