jQuery Plugin For Managing Hardware Accelerated CSS3 Animations - animo.js

animo.js is a stunning jQuery plugin that provides a simple way to manage hardware accelerated CSS3 animations with special effects such like stack animations, cross-browser blurring, rotate, bounce, callbacks on animation completion, etc.

See also:

• jQuery Plugin For Hardware Accelerated CSS3 Animations - Minimit Anima
• Stunning CSS Framework For CSS3 Animations With jQuery

Basic Usage:

1. Include jQuery library 2.0+ and jQuery animo.js script on your web page

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>

2. Include required jQuery animo.js stylesheet on your web page

<link href="animate+animo.css" rel="stylesheet" type="text/css">

3. Create the html for the Tada and Bounce animations

<div id="demo" style="height:100px;width:100px;background:#34495e"></div>
<button onclick="$('#demo2').animo({animation: ['tada', 'bounce'], duration: 2});">Tada and Bounce</button>

4. Settings

// Animations

$(element).animo({
	// [string]/[array] class name(s) of the css animation,
	animation: "name", // or ["name1", "name2", "name3"]
	// [float] time (in seconds) for the animation to last during 1 iteration
	duration: 0.8,
	// [int] number of times the animation shall repeat itself
	iterate: 1,
	// [string] how the animation should progress over the duration of each cycle
	timing: "linear",
	// [boolean] whether or not to "cleanse" the element after the animation has completed
	keep: false
} [,function]);

// Blur

// Specifying options
$(element).animo("blur", {
	// [int] radius of the blur
	amount: 3,
	// [float] time (in seconds) from focus to blur
	duration: 0.6,
	// [float] time (in seconds) to automatically focus after blur
	focusAfter: 3.5,
} [,function]);

// Using defaults
$(element).animo("blur" [,function]);

// Rotate 

// Specifying options
$(element).animo("rotate", {
	// [int] degrees from origin to rotate element
	degrees: 15,
	// [float] time (in seconds) to complete rotation
	duration: 0.6
} [,function]);

// Using defaults
$(element).animo("rotate" [,function]);

// Focus

// Removes blur effect on an element immediately
$(element).animo("focus");

// Cleanse

// Removes all references to animo effects
$(element).animo("cleanse");

---

This awesome jQuery plugin is developed by ThrivingKings. For more Advanced Usages, please check the demo page or visit the official website.