jQuery Roundup: minimit-anima, loda-button

Note: You can send your plugins and articles in for review through our contact form.

minimit-anima

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...

Note: You can send your plugins and articles in for review through our contact form.

minimit-anima

$(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

/images/posts/minimit.png

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:

<ahref="#"class="loda-btn"><spanaria-hidden="true"class="loda-icon icon-mail"></span>
  Mail
</a>

And requires a bit of JavaScript to set it up:

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

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

lodaBtn.lodaButton('start');

The icon fonts are IcoMoon by Keyamoon.