Доброго всем. Как можно применить анимацию mo.js к нескольким элементам, вернее ко всем элементам с одним и тем же классом?
var el = document.querySelector('.my-button'),
elSpan = el.querySelector('span'),
// mo.js timeline obj
timeline = new mojs.Timeline(),
scaleCurve = mojs.easing.path('M0,100 L25,99.9999983 C26.2328835,75.0708847 19.7847843,0 100,0'),
// tweens for the animation:
// burst animation
tween1 = new mojs.Burst({
parent: el,
duration: 1500,
shape : 'circle',
fill : [ '#e67e22', '#DE8AA0', '#8AAEDE', '#8ADEAD', '#DEC58A', '#8AD1DE' ],
x: '50%',
y: '50%',
opacity: 0.8,
childOptions: { radius: {20:0} },
radius: {40:120},
angle: {0: 180},
count: 8,
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: '#2ecc71',
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) {
if(progress > 0.3) {
var scaleProgress = scaleCurve(progress);
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(' + scaleProgress + ',' + scaleProgress + ',1)';
elSpan.style.WebkitTransform = elSpan.style.color = '#2ecc71';
} else {
elSpan.style.WebkitTransform = elSpan.style.transform = 'scale3d(0,0,1)';
elSpan.style.WebkitTransform = elSpan.style.color = 'rgba(0,0,0,0.3)';
}
}
});
// add tweens to timeline:
timeline.add(tween1, tween2, tween3);
// when clicking the button start the timeline/animation:
el.addEventListener('mousedown', function() {
timeline.start();
});
.wrapper {
background: #ccc;
display: flex;
justify-content: center;
align-items: center;
align-content: center;
text-align: center;
height: 500px;
}
.my-button {
background: transparent;
border: none;
outline: none;
margin: 0;
padding: 0;
position: relative;
text-align:center;
}
svg {
top: 0;
left: 0;
}
.send-icon {
position: relative;
font-size: 40px;
color: rgba(0,0,0,0.3);
}
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<script src="http://netgon.net/mo.min.js"></script>
<div class="wrapper">
<button class="my-button">
<span class="send-icon fa fa-paper-plane"></span>
</button>
</div>
Пример на codepen