Refactor scripts into modules

animate.js

@@ -0,0 +1,83 @@
+(function(){
+  const lastAngles = {
+    handXeno: 0,
+    handQuantic: 0,
+    handChronon: 0,
+    handEonstrip: 0,
+    handMegasequence: 0
+  };
+
+  function rotateHand(id, angle) {
+    const el = document.getElementById(id);
+    if (!el) return;
+    const prev = lastAngles[id];
+
+    if (angle < prev) {
+      const target = angle + 360;
+      const handle = () => {
+        el.removeEventListener('transitionend', handle);
+        el.style.transition = 'none';
+        el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
+        void el.offsetWidth;
+        el.style.transition = '';
+      };
+      el.addEventListener('transitionend', handle, { once: true });
+      el.style.transform = `translateX(-50%) translateZ(0) rotate(${target}deg)`;
+    } else {
+      el.style.transform = `translateX(-50%) translateZ(0) rotate(${angle}deg)`;
+    }
+    lastAngles[id] = angle;
+  }
+
+  function animateSwipe(direction, onDone) {
+    const grid = document.getElementById('eonstripGrid');
+    if (!grid) { onDone(); return; }
+
+    grid.style.transition = 'none';
+    grid.style.transform = 'translateX(0)';
+    void grid.offsetWidth;
+
+    grid.style.transition = 'transform 0.3s ease';
+    grid.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
+
+    function afterOut() {
+      grid.removeEventListener('transitionend', afterOut);
+      grid.style.transition = 'none';
+      grid.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
+      onDone();
+      void grid.offsetWidth;
+      grid.style.transition = 'transform 0.3s ease';
+      grid.style.transform = 'translateX(0)';
+    }
+    grid.addEventListener('transitionend', afterOut);
+  }
+
+  function animateDetailSwipe(direction, onDone) {
+    const tl = document.getElementById('detailTimeline');
+    if (!tl) { onDone(); return; }
+
+    tl.style.transition = 'none';
+    tl.style.transform = 'translateX(0)';
+    void tl.offsetWidth;
+
+    tl.style.transition = 'transform 0.3s ease';
+    tl.style.transform = `translateX(${direction > 0 ? '-100%' : '100%'})`;
+
+    function afterOut() {
+      tl.removeEventListener('transitionend', afterOut);
+      tl.style.transition = 'none';
+      tl.style.transform = `translateX(${direction > 0 ? '100%' : '-100%'})`;
+      onDone();
+      void tl.offsetWidth;
+      tl.style.transition = 'transform 0.3s ease';
+      tl.style.transform = 'translateX(0)';
+    }
+    tl.addEventListener('transitionend', afterOut);
+  }
+
+  window.Animate = {
+    rotateHand,
+    animateSwipe,
+    animateDetailSwipe
+  };
+})();