Icon Animations Powered by mo.js

Various icon animations made with mo.js, a powerful motion graphics library by Oleg Solomka. Inspiration comes from the Dribbble shot "Like Animation" by Daryl Ginn.

Animocons_Featured

View demo Download source

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:

Attention: We’ve made some crazy, nonsense and overly exaggerated animations! View and use with caution! ;)

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' ],
		x: '50%',
		y: '50%',
		opacity: 0.6,
		childOptions: { radius: {20:0} },
		radius: {40:120},
		count: 6,
		isSwirl: true,
		isRunLess: 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,
		x: '50%',     
		y: '50%',
		isRunLess: true,
		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.start();
});

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 39

  1. 6

    Hello Mary, Thank you very much for this post. I was able to do something but I realized the bullet numbering is from the JS. Please how can I remove the bullet numbering.

    Best Regards
    …Nate

  2. 9

    Very nice and interesting effects. Also would be great to hear your opinion about livicons.com

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>