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.

From our sponsor: Sign up for Mailchimp today.

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' ],
		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!

Tagged with:

Mary Lou

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

http://www.codrops.com

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 45

Comments are closed.
  1. For some reason, when I click on the buttons using the mouse, nothing happens, but when I do using my laptop’s touchscreen they work fine. Not sure if the problem appears only on touchscreen laptops. just feedback 🙂

    Good job 🙂

    • Same here, when i click them nothing happens (but my notebook that is in my dockingsation has a touchscreen).

    • If you inspect the code it first checks if it’s a touch device, if so it uses ‘touchstart’ otherwise it falls to ‘click’. So with devices that have both it disables the click and only activates the touch causing this problem.

  2. “We’ve made some crazy, nonsense and overly exaggerated animations! View and use with caution! ;)”

    Just because you said that I’m gonna use ALL the animations…AT ONCE!

  3. Hi Mary Lou, great tutorial there! However, I’ve found a couple of errors in the code… 1) You have 2 tween1 vars. 2) You are using moTimeline.start(); when your variable is defined just timeline. Thank you!

  4. Thanks for your constantly inspiring work! Looks like you can come up with 50 magic numbers and the outcome just fits so nicely together.. (Speaking about bezier-curves, durations, radius,..)

  5. Hello, I excuse my ignorance but I’m new in this world … how the path of svg calculated?
    Example: <path d = "M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"> </ path>

    Thank you!

  6. I tried burst effect with timeline only and nothing is happening on page. Simple code but not working

    ;(function(window) {
    ‘use strict’;
    function init() {

    var molinkEl = document.querySelector(‘.special-link’),
    moTimeline = new mojs.Timeline(),
    moburst1 = new mojs.Burst({
    parent: molinkEl,
    duration: 1300,
    shape : ‘circle’,
    fill : [ ‘#988ADE’, ‘#DE8AA0’, ‘#8AAEDE’, ‘#8ADEAD’, ‘#DEC58A’, ‘#8AD1DE’ ],
    x: ‘0%’,
    y: ‘-50%’,
    radius: {0:60},
    count: 6,
    isRunLess: true,
    easing: mojs.easing.bezier(0.1, 1, 0.3, 1)
    });

    moTimeline.add(moburst1);
    $(“.special-link”).hover(function() {
    moTimeline.start();
    });
    }

    init();

    })(window);

  7. Wow!!!
    That’s really great.
    Icons are really so beautiful.
    Thanks for sharing.
    Gustavo Woltmann

  8. 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. Where did you get this information?

  9. On iPhone 6 I see some breaking occurring on some of the animations. It looks as though the animation overloads and the numbers of the sections blink. Anyone else notice this?

  10. When I load mo.js , I have this errro in my console :

    Uncaught TypeError: Cannot read property ‘appendChild’ of null

    ?? One idees ?

    • probably just change `document.querySelector(‘.icobutton’)` to use the `querySelectorAll` method instead and then loop through the DomList (array) you get back and apply the mo.js code to each element.

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

  12. Nice tutorial. Also first time hearing of mo.js; pretty interesting stuff!

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

  14. hello all right, loved the tutorial and liveliest . I managed to successfully put more when it serves to link anchor it does not run the liveliest . help me!

  15. This is great, the only downside is that mo.js has 330kb, and for some animation, this is A LOT.

    Do you guys plans to do the same kind of animations but CSS3 only? That would be epic!

  16. Hello everyone,
    Could anyone help me out with the mojs thing? i love it and i definitely would love to use it on my project…Nothing seems to happen when i click the icons… any solution?

  17. Thanks for the great animation. I’ve used like animation to a site where user can login and like specific images. How can I get the checked function for the next visits?