Tiny Javascript tweening engine.
import Weeee from 'weeee.js';
const cube = document.querySelector('.cube');
const eyes = document.querySelectorAll('.eye');
const showCube = new Weeee({
duration: 1000,
delay: 1000,
autoplay: true,
easing: Weeee.easeOutElastic,
func: (progress) => {
cube.style.transform = `scale(${progress})`;
},
});
const rotateEyes = new Weeee({
duration: Infinity,
delay: 1200,
autoplay: true,
func: (progress, details) => {
const rotation = details.delta / 10;
eyes[0].style.transform =`rotate(${-rotation}deg)`;
eyes[1].style.transform = `rotate(${rotation}deg)`;
},
});
Copyright © Ivan Bogachev (@sfi0zy), 2021