Для аминирования иконок будем использовать библиотеку mo.js.
mo.js - мощная библиотека для создания анимаций.
В примерах мы будем применять эффекты к иконкам социальной активности и к примеру "добавить в закладки"
mo.js можно применять не только к инонкам, но и к абсолютно любым элементам на странице.
Разберем пример в котором будем использовать иконку Font Awesome
<button class="icobutton icobutton--thumbs-up">
<span class="fa fa-thumbs-up"></span>
</button>
Определение анимации в js
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 = new mojs.Timeline(),
// анимация:
// “взрыв”
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)
}),
// “кольцо”
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)
}),
// масштабирование
tween3 = new mojs.Tween({
duration : 900,
onUpdate: function(progress) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
}
});
// добавляем эффекты:
timeline.add(tween1, tween2, tween3);
// при клике по кнопке активируем анимацию:
el.addEventListener('mouseenter', function() {
timeline.start();
});