What a bummer

Your browser doesn’t support CSS Animations, which is the sole purpose of animo. Go download a modern browser and come on back — it’s worth it.

CSS animations are phenomenal and offer numerous advantages over JavaScript powered animations. First, they're hardware accelerated, which sometimes hard to notice on a desktop but is unbelievably present when viewing on a mobile browser. Second, I personally feel it's much easier to visualize and write the animation/transition in CSS using keyframes.

The problem with CSS alone is that they're usually fired on page load or a hover event, and you can't stack animations or trigger another when one has completed. That's where JavaScript and animo come in. You can easily stack animations to fire one after another, specify callbacks for the completion of an animation, or simply fire animations on any event or at any moment you please.

Installing

$ git clone https://github.com/ThrivingKings/animo.js.git

$ bower install animo.js

You can easily install animo via the GitHub repo or using bower's package manager.

Using

First and foremost, animo includes the amazing animate.css library by Dan Eden which provides you with nearly 60 beautiful animations from attention seekers to entrances and exits. I've added a few helper animations to the library but please refer to the animate.css documentation for animation class names.

animo's only dependency is jQuery 2 or later. The source includes animate.css plus the helper animations made specifically for animo but you can use whatever stylesheet of animations you'd like.

<script src="http://code.jquery.com/jquery-2.0.3.min.js" type="text/javascript"></script>
<script src="animo.js" type="text/javascript"></script>
<link href="animate+animo.css" rel="stylesheet" type="text/css">

$('#demo1').animo( { animation: 'tada' } );

$('#demo2').animo( { animation: ['tada', 'bounce'], duration: 2 } );

The animation we're calling is simply the class name of the animation from our stylesheet. Okay, now, let's take advantage of amino's powerful callback feature, allowing us to trigger an element's animation on the completion of another's. We'll speed up the first and slow down the second.

$('#demo3').animo( { animation: 'bounceInLeft', duration: 1 }, function() {
	$('#demo4').animo( { animation: 'bounceInRight', duration: 2 } );
});

You'll see that stacking the animations into an array runs them all at the same duration, where as setting a callback allows you to run each with an alternate duration. The callback function is extremely beneficial if you want to, say, require a user to watch an animation before they can interact with something.

Let's put everything together and make a little magic.

a

n

i

m

o

// I made a function that ran through the "fading out" animations, then called a function that handles the "fading in"
// Fading out
$('#demo-a').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
	$('#demo-n').animo({animation: "fadeOutUp", duration: 0.5, keep: true}, function() {
		$('#demo-i').animo({animation: "fadeOutDown", duration: 0.5, keep: true}, function() {
			$('#demo-m').animo({animation: "fadeOutLeft", duration: 0.5, keep: true}, function() {
				$('#demo-o').animo({animation: "fadeOutRight", duration: 0.5, keep: true}, doMagicIn()); // function to fade them back in
			});
		});
	});
});

// Fading in
$('#demo-a').animo({animation: "fadeInLeft", duration: 0.5}, function() {
	$('#demo-n').animo({animation: "fadeInUp", duration: 0.5}, function() {
		$('#demo-i').animo({animation: "fadeInDown", duration: 0.5}, function() {
			$('#demo-m').animo({animation: "fadeInLeft", duration: 0.5}, function() {
				$('#demo-o').animo({animation: "fadeInRight", duration: 0.5});
			});
		});
	});
});

You'll see that I used a keep option on the fading out animations. This is great for disappearing animations where you want to keep the item hidden but don't want to change the styling of the element. If I didn't use the keep option, the letters would have bounced back to their original state when the animation completed.

Lastly, let's look at some additional built-ins that come with amino— most specifically: cross-browser blurring and focusing of elements. Blurring using the CSS filter rule is new, experimental, and won't work across all browsers. animo takes care of this and allows you to effectively blur and focus elements (with callbacks) with ease.

Blur Inclusion

Focus Inclusion

// Blurring of the image
$('#blur_img').animo('blur');

// Focus
$('#blur_img').animo('focus');

Art party disrupt ugh, banjo Echo Park letterpress Schlitz yr Cosby sweater small batch fashion axe cred mustache viral. Stumptown gentrify selfies, brunch banh mi tattooed fanny pack disrupt art party. Vice Neutra umami Truffaut. Farm-to-table whatever twee narwhal bespoke VHS. Ugh fingerstache craft beer.

Blur Hipster Ipsum, slowly

Focus Hipster Ipsum

// Blurring of the text (slowly and heavily)
$('#blur_text').animo('blur', {duration: 3, amount: 15});

// Focus
$('#blur_text').animo('focus');

Pretty sweet eh? How about some rotations? Keep in mind that the rotate function rotates the element clockwise around its origin.

$('.rotate').animo("rotate", { degrees: 45 });

$('#demo5, #demo8').animo('rotate', { degrees: -30 }, function() {
  $('#demo6, #demo7').animo('rotate', {degrees: -15});
});

$('#demo5').animo("rotate", { degrees:90 }, function() {
	$('#demo6').animo("rotate", { degrees:90 }, function() {
		$('#demo7').animo("rotate", { degrees:90 }, function() {
			$('#demo8').animo("rotate", { degrees:90 });
		});
	});
});

$('#demo5').animo("rotate", { degrees:90 }, function(e) {
	e.element.animo( { animation: "flipOutX", keep: true } );
	$('#demo6').animo("rotate", { degrees:90 }, function(e) {

		e.element.animo( { animation: "flipOutY", keep: true } );
		$('#demo7').animo("rotate", { degrees:90 }, function(e) {

			e.element.animo( { animation: "flipOutX", keep: true } );
			$('#demo8').animo("rotate", { degrees:90 }, function(e){
				e.element.animo( { animation: "flipOutY", keep: true } );
			});
		});
	});
});

// Reset
$('.rotate').animo("cleanse");

While on the topic of rotating, let's have some fun with the spinner animation.

$('#demo9').animo({animation: "spinner", iterate: 2});
$('#demo10').animo({animation: "spinner", iterate: 2});
$('#demo11').animo({animation: "spinner", iterate: 2});
$('#demo12').animo({animation: "spinner", iterate: "infinite"});

// Reset
$('.spin').animo("cleanse");

$('#demo9').animo({animation: "spinner", duration: 2.5, iterate: 3});
$('#demo10').animo({animation: "spinner", duration: 2, iterate: 3});
$('#demo11').animo({animation: "spinner", duration: 1.5, iterate: 3});
$('#demo12').animo({animation: "spinner", duration: 1, iterate: 3});

As you can see, the possibilities are nearly endless and we could spend an eternity showing all the different variations and combinations made possible by animo.

Documentation

The goal with animo was to make it extremely useful and powerful, all the while keeping it simple, easy to use, and easy to understand. Currently, there are five core functions to animo.

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]);

// 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]);

// 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]);

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

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

There are more functions I would love to add to animo, and hopefully someday we'll get there, but for now these seemed to be the most useful for animo's debut.

Drafting your own animations

Luckily, there is an ocean of information and tutorials on how to write CSS animations. As I noted above, animo ships with Dan Eden's animate.css, which I highly recommend studying before writing your own animations. The structure is extremely easy to follow and really makes sense when attempting to visualize your animations. I also recommend checking out codrops, which is full of CSS animation tutorials and just amazing tutorials in general.