diff --git a/clock.js b/clock.js index e7e4c18..575fe69 100644 --- a/clock.js +++ b/clock.js @@ -49,16 +49,25 @@ const el = document.getElementById(id); if (!el) return; const prev = lastAngles[id]; + if (angle < prev) { - // Disable transition for wrap-around jumps - el.style.transition = 'none'; - el.style.transform = `rotate(${angle}deg)`; - // Force reflow so the style takes effect immediately - void el.offsetWidth; - el.style.transition = ''; + // When wrapping around (e.g. 15 → 0), animate to one full turn + // and then snap back to the new angle to avoid a jump. + const target = angle + 360; + const handle = () => { + el.removeEventListener('transitionend', handle); + // Snap back without animation + el.style.transition = 'none'; + el.style.transform = `rotate(${angle}deg)`; + void el.offsetWidth; + el.style.transition = ''; + }; + el.addEventListener('transitionend', handle, { once: true }); + el.style.transform = `rotate(${target}deg)`; } else { el.style.transform = `rotate(${angle}deg)`; } + lastAngles[id] = angle; }