jQuery Roundup: minimit-anima, loda-button

2013-07-02 00:00:00 +0100 by Alex R. Young
Note: You can send your plugins and articles in for review through our contact form.



minimit-anima (GitHub: minimit / minimit-anima, License: MIT, jQuery: minimit-anima) by Riccardo Caroli is an animation plugin that uses hardware accelerated CSS3 animations with fallbacks for older browsers. The API is queue-based like jQuery's standard animation API. The following example specified an easeOut of 400ms:

$(this).anima({ x: 20, y: 20 }, 400);

Hardware acceleration can be triggered by adding the z co-ordinate and perspective properties:

$(this).anima({ x: 200, z: 0, perspective: 1000 }, 800);

The API has other features, like delaying animations with delayAnima(ms), clearing the queue with clearAnima, and stopping the current animation with stopAnima. Any CSS property can be animated, along with shortcuts for scale[X|Y|Z], rotate, and skew.



loda-button (GitHub: lugolabs / loda-button) by Artan is a small plugin that animates the icon in a button while an asynchronous operation is performed. The recommended markup uses anchors and spans:

<a href="#" class="loda-btn">
  <span aria-hidden="true" class="loda-icon icon-mail"></span>

And requires a bit of JavaScript to set it up:

var lodaBtn = $('#loda-btn').lodaButton();

The animation can be triggered by passing start to the button:


The icon fonts are IcoMoon by Keyamoon.