Icon Animations Powered by mo.js

From our sponsor: Squarespace is everything you need to sell anything: your brand, products, services, or content.

Maybe you’ve already stumbled across mo.js, a very powerful motion graphics library for the web made by Oleg Solomka. You can do tons of awesome things with it and today we’d like to share our take on some icon animations using the library.

It would be really great to be able to animate icons easily to look like Twitter’s heart animation, and after seeing this Dribbble shot by Daryl Ginn of a hybrid (this is “what Twitter’s like animation would look like if it were on Facebook”), we wanted to try to use mo.js together with Dave Gandy’s Font Awesome Web font and see what can be done.

The icons that we are animating are actions where it makes sense to have an active state, like for example the “favorite”, “like” or “upvote”. Although, theoretically, you could apply these kind of effects to anything, it really feels more sensible for these kind of actions.

Oleg’s library is really easy to use. With just one tutorial available until now, you can get an insight on how to exert precise timing function control on elements. This opens up many possibilities and allows for crafting complex, realistic-looking animations. Check out the GitHub repo and see more info and how you can contribute.

Some great resources to get inspired for life like motions that we find useful:

• The Illusion of Life by Cento Lodigiani based on the 12 basic principles of animation developed by Frank Thomas and Ollie Johnston from Disney
• The Illusion of Life (on Tumblr)
• Giving Animations Life by Joel Besada who created Bounce.js, a fantastic library for creating beautiful keyframe animations

Let’s have a look at an example. So we’ve used Font Awesome as icon font and include it in a button like this:

<button class="icobutton icobutton--thumbs-up">
	<span class="fa fa-thumbs-up"></span>
</button>

The styles include just some resets and size definitions for the button.

You can now define your animations as follows:

    var scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0');
    var el = document.querySelector('.icobutton'),
	elSpan = el.querySelector('span'),
	// mo.js timeline obj
	timeline = new mojs.Timeline(),

	// tweens for the animation:

	// burst animation
	tween1 = new mojs.Burst({
		parent: el,
		duration: 1500,
		shape : 'circle',
		fill : [ '#988ADE', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
		opacity: 0.6,
		childOptions: { radius: {20:0} },
		radius: {40:120},
		count: 6,
		isSwirl: true,
		easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
	}),
	// ring animation
	tween2 = new mojs.Transit({
		parent: el,
		duration: 750,
		type: 'circle',
		radius: {0: 50},
		fill: 'transparent',
		stroke: '#988ADE',
		strokeWidth: {15:0},
		opacity: 0.6,
		easing: mojs.easing.bezier(0, 1, 0.5, 1)
	}),
	// icon scale animation
	tween3 = new mojs.Tween({
		duration : 900,
		onUpdate: function(progress) {
			var scaleProgress = scaleCurve(progress);
			elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
		}
	});

// add tweens to timeline:
timeline.add(tween1, tween2, tween3);

// when clicking the button start the timeline/animation:
el.addEventListener('mouseenter', function() {
	timeline.replay();
});

Note that we are using a fixed size for the effects here. For a more flexible approach, you could define the sizes dynamically.

Okay, now try your own animations; the possibilities are endless!

We hope you enjoyed these animations and find them inspiring!