import { animate, utils, createDraggable, spring } from 'animejs';
const [ $logo ] = utils.$('.logo.js');
const [ $button ] = utils.$('button');
let rotations = 0;
// Created a bounce animation loop
animate('.logo.js', {
scale: [
{ to: 1.25, ease: 'inOut(3)', duration: 200 },
{ to: 1, ease: spring({ bounce: .7 }) }
],
loop: true,
loopDelay: 250,
});
// Make the logo draggable around its center
createDraggable('.logo.js', {
container: [0, 0, 0, 0],
releaseEase: spring({ bounce: .7 })
});
// Animate logo rotation on click
const rotateLogo = () => {
rotations++;
$button.innerText = `rotations: ${rotations}`;
animate($logo, {
rotate: rotations * 360,
ease: 'out(4)',
duration: 1500,
});
}
$button.addEventListener('click', rotateLogo);
