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

From our sponsor: Elementor, a design oriented WordPress website builder for pros

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.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

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 ?