Make Animated Icons Using Javascript with mo.js

Mo.js, a really powerful motion graphics library for the web created by Oleg Solomka. you'll be able to do plenty of amazing things with it and these days we’d prefer to share our take on some icon animations using the library.



It would be extremely nice to be ready to animate icons simply to appear like Twitter’s heart animation, and once seeing this Dribbble shot by Daryl Ginn of a hybrid (this is “what Twitter’s like animation would seem like if it were on Facebook”), we needed to do to use mo.js together with Dave Gandy’s Font awesome web font and see what is done.


The icons that we are animating are actions wherever it makes sense to own an active state, like as an example the “favorite”, “like” or “upvote”. Although, theoretically, you may apply these quite effects to something, it extremely feels additional smart for these quite actions.

Download Source Code


Demo: You can check here also


Let’s have a glance at an example. therefore 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 designs include some resets and size definitions for the button.

You can currently 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 additional flexible approach, you may define the sizes dynamically.
Okay, now try your own animations; the probabilities are endless!
We hope you enjoyed these animations and notice them inspiring!

No comments:

Post a Comment