36 lines
867 B
JavaScript
36 lines
867 B
JavaScript
/* documentation here: https://animejs.com/documentation/getting-started/installation */
|
|
const { animate, utils, createSpring } = anime;
|
|
|
|
// @ts-check
|
|
|
|
const $cards = utils.$('.card')
|
|
|
|
animate($cards, {
|
|
// Property keyframes
|
|
y: [
|
|
{ to: '-2.75rem', ease: 'outExpo', duration: 600 },
|
|
{ to: 0, ease: 'outBounce', duration: 800, delay: 100 }
|
|
],
|
|
// Property specific parameters
|
|
rotate: {
|
|
from: '-1turn',
|
|
delay: 0
|
|
},
|
|
delay: (_, i) => i * 50, // Function based value
|
|
ease: 'inOutCirc',
|
|
});
|
|
|
|
/**
|
|
@param {*} card
|
|
*/
|
|
const hovorLogo = (card) => {
|
|
animate(card, {
|
|
scale: [
|
|
{ to: 1.1, ease: 'inOut(2)', duration: 50 },
|
|
{ to: 1, ease: createSpring({ stiffness: 300 }) }
|
|
],
|
|
})
|
|
}
|
|
|
|
$cards.forEach((card) => card.addEventListener('mouseenter', () => hovorLogo(card)))
|