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!
Is there a way to reset the timeline?
Oh. maaaaan! aWESOME!
And what is about API? Can find only easing effects.
I never heard of mo.js … but would be cool to have animated icons.
Is there some way to use that for all objects with the same class?
I also want to know
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.
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
Nice tutorial. Also first time hearing of mo.js; pretty interesting stuff!
Lol! that last one is super…
Very nice and interesting effects. Also would be great to hear your opinion about livicons.com
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!
The demo seems broken, nothing seems to happen when i click the icons 🙁
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!
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?
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?