function animateMarquee(el, duration) {
const innerEl = el.querySelector('.marquee__inner');
const innerWidth = innerEl.offsetWidth;
const cloneEl = innerEl.cloneNode(true);
el.appendChild(cloneEl);
let start = 0;
let rafId = null;
let progressElapsed = 0;
let progress = 0;
function step(now) {
progress = progressElapsed + (now - start) % duration / duration;
const translateX = innerWidth * progress;
innerEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
cloneEl.style.transform = `translate3d(-${translateX}px, 0 , 0)`;
rafId = requestAnimationFrame(step);
}
function play() {
if (rafId) return;
progressElapsed = progress;
start = performance.now();
rafId = requestAnimationFrame(step);
}
function pause() {
cancelAnimationFrame(rafId);
rafId = null;
}
play();
return { play, pause };
}
const marquee1 = document.querySelector('#marquee1');
const playback = animateMarquee(marquee1, 15000);
marquee1.addEventListener('mouseenter', () => playback.pause());
marquee1.addEventListener('mouseleave', () => playback.play());