joe/everytab
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

better gated firefox specific code

Browse source
This commit is contained in:
Joe Lothan 2026-05-25 17:18:28 -04:00
parent 8ceb31bcbb
commit cb8d23842c
3 changed files with 28 additions and 12 deletions
Download patch file Download diff file Expand all files Collapse all files

18
frontend/site.js
View file

@ -118,6 +118,11 @@ function createRow(entries, rowIndex) {
// Store config — animation starts after DOM insertion (needs measured width)
row._animConfig = { pxPerSec, goLeft, stagger };
// CSS animation classes for Chrome/Safari (Firefox uses rAF in startRowAnimation)
if (!isFirefox) {
row.classList.add(goLeft ? "scroll-left" : "scroll-right");
}
// Add tabs twice so the marquee loops seamlessly (translate -50% = one full set)
for (let copy = 0; copy < 2; copy++) {
for (const entry of entries) {
@ -151,15 +156,10 @@ function startRowAnimation(row) {
requestAnimationFrame(tick);
} else {
// Chrome/Safari: Web Animations API on the compositor
const duration = halfWidth / pxPerSec * 1000;
const from = goLeft ? "translateX(0px)" : `translateX(-${halfWidth}px)`;
const to = goLeft ? `translateX(-${halfWidth}px)` : "translateX(0px)";
row.animate(
[{ transform: from }, { transform: to }],
{ duration, iterations: Infinity, easing: "linear", iterationStart: stagger }
);
// Chrome/Safari: CSS @keyframes animation with calculated duration
const duration = halfWidth / pxPerSec;
row.style.setProperty("--speed", `${duration}s`);
row.style.animationDelay = `${-stagger * duration}s`;
}
}