05Orbit-Handle Drag Where Only the Angle Around a Center Changes

The pointer's coordinates are converted into an angle around a fixed center point, and the item travels along that circle while its radius stays constant.

Best forReordering items on a circular menu

ORBIT_RADIUS_PXORBIT_DECAY_RATEORBIT_KEY_STEP_DEG

Orbit-Handle Drag Where Only the Angle Around a Center Changes

<main class="stage">
<div class="ob is-demo" id="ob">
  <div class="ob__ring" id="obRing"></div>
  <div class="ob__hub" id="obHub"></div>
  <button type="button" class="ob__handle" id="obHandle" aria-label="A handle that orbits at a fixed radius. Press Enter to grab, arrow keys to rotate the angle"></button>
  <p class="ob__caption" id="obCaption">Drag it and only the angle changes as it orbits</p>
</div>
</main>

@use "../../../../site/static/demo-tokens" as *;
@include stage($stage-ink);

.ob {
  position: relative;
  width: min(92vw, calc(160vh - 12.8vw));
  max-width: 400px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob__ring {
  position: absolute;
  width: 148px;
  height: 148px;
  border-radius: $r-pill;
  border: 1px dashed rgba($subject-cream, .28);
}

.ob__hub {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: $r-pill;
  background: $subject-cream;
}

.ob__handle {
  position: absolute;
  appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  top: 50%;
  left: 50%;
  border-radius: $r-pill;
  background: $subject-blue;
  box-shadow: $shadow-raised;
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.ob__handle.is-grabbed,
.ob__handle:focus-visible {
  outline: 2px solid $subject-blue-light;
  outline-offset: 3px;
}

.ob.is-dragging .ob__handle {
  cursor: grabbing;
}

.ob__caption {
  position: absolute;
  bottom: 0;
  margin: 0;
  color: $subject-cream;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 340px) {
  .ob { height: 150px; }
  .ob__ring { width: 100px; height: 100px; }
  .ob__handle { width: 30px; height: 30px; margin: -15px 0 0 -15px; }
  .ob__caption { font-size: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .ob__handle { transition: none; }
}

html, body {
  margin: 0;
  overflow: hidden;
}

.stage {
  box-sizing: border-box;
  min-height: 100vh;
  display: grid;
  place-items: center;
  margin: 0;
  background: #17141a;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif;
  padding: clamp(8px, 4vw, 24px);
}

.ob {
  position: relative;
  width: min(92vw, 160vh - 12.8vw);
  max-width: 400px;
  height: 220px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ob__ring {
  position: absolute;
  width: 148px;
  height: 148px;
  border-radius: 999px;
  border: 1px dashed rgba(255, 247, 230, 0.28);
}

.ob__hub {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #fff7e6;
}

.ob__handle {
  position: absolute;
  appearance: none;
  border: 0;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  top: 50%;
  left: 50%;
  border-radius: 999px;
  background: #2f6df6;
  box-shadow: 0 14px 24px rgba(23, 20, 26, 0.32);
  cursor: grab;
  touch-action: none;
  will-change: transform;
}

.ob__handle.is-grabbed,
.ob__handle:focus-visible {
  outline: 2px solid #5b8cf8;
  outline-offset: 3px;
}

.ob.is-dragging .ob__handle {
  cursor: grabbing;
}

.ob__caption {
  position: absolute;
  bottom: 0;
  margin: 0;
  color: #fff7e6;
  font-weight: 500;
  font-size: 12px;
  line-height: 1.4;
  text-align: center;
}

@media (max-width: 340px) {
  .ob {
    height: 150px;
  }
  .ob__ring {
    width: 100px;
    height: 100px;
  }
  .ob__handle {
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
  }
  .ob__caption {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .ob__handle {
    transition: none;
  }
}

(function () {
  // 기법: 허브 중심에서 포인터까지의 각도를 atan2 로 매 프레임 계산해 핸들을
  // 고정 반지름(ORBIT_RADIUS_PX) 위 그 각도 지점으로만 옮긴다(반지름은 절대
  // 바뀌지 않음). 손을 떼면 마지막 각속도로 관성 회전하다 감쇠로 멈춘다.
  var root = document.getElementById('ob');
  var hub = document.getElementById('obHub');
  var handle = document.getElementById('obHandle');
  var caption = document.getElementById('obCaption');

  var ORBIT_RADIUS_PX = 74;
  var ORBIT_KEY_STEP_DEG = 12;
  var ORBIT_DECAY_RATE = 0.94;

  var angle = -90 * Math.PI / 180;
  var angularVel = 0;
  var grabbed = false;
  var dragging = false;
  var lastAngle = angle;
  var lastTs = null;
  var raf = 0;

  function applyHandle() {
    var x = Math.cos(angle) * ORBIT_RADIUS_PX;
    var y = Math.sin(angle) * ORBIT_RADIUS_PX;
    handle.style.transform = 'translate(' + x.toFixed(1) + 'px,' + y.toFixed(1) + 'px)';
  }

  function angleFromPointer(clientX, clientY) {
    var hr = hub.getBoundingClientRect();
    var hx = hr.left + hr.width / 2, hy = hr.top + hr.height / 2;
    return Math.atan2(clientY - hy, clientX - hx);
  }

  function shortestDelta(a, b) {
    var d = b - a;
    while (d > Math.PI) d -= Math.PI * 2;
    while (d < -Math.PI) d += Math.PI * 2;
    return d;
  }

  function inertiaTick(ts) {
    if (lastTs === null) lastTs = ts;
    var dt = Math.min((ts - lastTs) / 1000, 0.032);
    lastTs = ts;
    angle += angularVel * dt;
    angularVel *= Math.pow(ORBIT_DECAY_RATE, dt * 60);
    applyHandle();
    if (Math.abs(angularVel) > 0.02) { raf = requestAnimationFrame(inertiaTick); return; }
    angularVel = 0;
    lastTs = null;
  }

  function beginDrag(clientX, clientY) {
    cancelAnimationFrame(raf);
    dragging = true;
    angularVel = 0;
    angle = angleFromPointer(clientX, clientY);
    lastAngle = angle;
    lastTs = null;
    root.classList.add('is-dragging');
    applyHandle();
  }

  function moveDrag(clientX, clientY, ts) {
    var next = angleFromPointer(clientX, clientY);
    var delta = shortestDelta(lastAngle, next);
    angle = lastAngle + delta;
    if (ts !== undefined && lastTs !== null) {
      var dt = Math.max((ts - lastTs) / 1000, 0.001);
      angularVel = delta / dt;
    }
    lastAngle = angle;
    lastTs = ts !== undefined ? ts : lastTs;
    applyHandle();
  }

  function endDrag() {
    dragging = false;
    root.classList.remove('is-dragging');
    var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
    if (reduce || Math.abs(angularVel) < 0.02) { angularVel = 0; }
    else { lastTs = null; raf = requestAnimationFrame(inertiaTick); }
  }

  handle.addEventListener('pointerdown', function (e) {
    root.classList.remove('is-demo');
    handle.setPointerCapture(e.pointerId);
    beginDrag(e.clientX, e.clientY);
    caption.textContent = 'Only the angle is calculated to move it along the orbit';
    e.preventDefault();
  });
  handle.addEventListener('pointermove', function (e) {
    if (!dragging) return;
    moveDrag(e.clientX, e.clientY, e.timeStamp);
    e.preventDefault();
  });
  handle.addEventListener('pointerup', function (e) {
    if (!dragging) return;
    endDrag();
    caption.textContent = 'Drag it and only the angle changes as it orbits';
    e.preventDefault();
  });

  handle.addEventListener('keydown', function (e) {
    root.classList.remove('is-demo');
    if (e.key === 'Enter' || e.key === ' ') {
      e.preventDefault();
      grabbed = !grabbed;
      handle.classList.toggle('is-grabbed', grabbed);
      caption.textContent = grabbed ? 'Grabbed. Rotate the angle with arrow keys' : 'Drag it and only the angle changes as it orbits';
      return;
    }
    if (!grabbed) return;
    var dir = 0;
    if (e.key === 'ArrowLeft' || e.key === 'ArrowUp') dir = -1;
    else if (e.key === 'ArrowRight' || e.key === 'ArrowDown') dir = 1;
    else if (e.key === 'Escape') {
      e.preventDefault();
      grabbed = false;
      handle.classList.remove('is-grabbed');
      caption.textContent = 'Drag it and only the angle changes as it orbits';
      return;
    } else { return; }
    e.preventDefault();
    cancelAnimationFrame(raf);
    angularVel = 0;
    angle += dir * ORBIT_KEY_STEP_DEG * Math.PI / 180;
    applyHandle();
  });

  applyHandle();

  var reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
  if (reduce) {
    root.classList.remove('is-demo');
  } else {
    var hubRect0 = hub.getBoundingClientRect();
    var hx0 = hubRect0.left + hubRect0.width / 2;
    var hy0 = hubRect0.top + hubRect0.height / 2;
    var demoStart = null;
    function demoTick(ts) {
      if (demoStart === null) demoStart = ts;
      var t = ts - demoStart;
      if (t < 200) {
        // 대기
      } else if (t < 1300) {
        var p = (t - 200) / 1100;
        var a = (-90 + p * 200) * Math.PI / 180;
        var px = hx0 + Math.cos(a) * (ORBIT_RADIUS_PX + 40);
        var py = hy0 + Math.sin(a) * (ORBIT_RADIUS_PX + 40);
        if (t < 220) beginDrag(px, py);
        moveDrag(px, py, ts);
      } else if (t < 1330) {
        endDrag();
      } else {
        if (t > 1900) demoStart = ts - 60;
      }
      requestAnimationFrame(demoTick);
    }
    requestAnimationFrame(demoTick);
  }
})();

import { useEffect, useRef } from "react";
import styles from "./DragPhysOrbitHandle.module.scss";

type Box<T> = { current: T };

export default function DragPhysOrbitHandle() {
  const rootRef = useRef<HTMLDivElement>(null);
  const hubRef = useRef<HTMLDivElement>(null);
  const handleRef = useRef<HTMLButtonElement>(null);
  const captionRef = useRef<HTMLParagraphElement>(null);

  useEffect(() => {
    const root = rootRef.current;
    const hub = hubRef.current;
    const handle = handleRef.current;
    const caption = captionRef.current;
    if (!root || !hub || !handle || !caption) return;

    const ORBIT_RADIUS_PX = 74;
    const ORBIT_KEY_STEP_DEG = 12;
    const ORBIT_DECAY_RATE = 0.94;

    let angle = (-90 * Math.PI) / 180;
    let angularVel = 0;
    let grabbed = false;
    let dragging = false;
    let lastAngle = angle;
    let lastTs: number | null = null;
    let raf = 0;

    function applyHandle() {
      const x = Math.cos(angle) * ORBIT_RADIUS_PX;
      const y = Math.sin(angle) * ORBIT_RADIUS_PX;
      handle!.style.transform = "translate(" + x.toFixed(1) + "px," + y.toFixed(1) + "px)";
    }

    function angleFromPointer(clientX: number, clientY: number) {
      const hr = hub!.getBoundingClientRect();
      const hx = hr.left + hr.width / 2, hy = hr.top + hr.height / 2;
      return Math.atan2(clientY - hy, clientX - hx);
    }

    function shortestDelta(a: number, b: number) {
      let d = b - a;
      while (d > Math.PI) d -= Math.PI * 2;
      while (d < -Math.PI) d += Math.PI * 2;
      return d;
    }

    function inertiaTick(ts: number) {
      if (lastTs === null) lastTs = ts;
      const dt = Math.min((ts - lastTs) / 1000, 0.032);
      lastTs = ts;
      angle += angularVel * dt;
      angularVel *= Math.pow(ORBIT_DECAY_RATE, dt * 60);
      applyHandle();
      if (Math.abs(angularVel) > 0.02) { raf = requestAnimationFrame(inertiaTick); return; }
      angularVel = 0;
      lastTs = null;
    }

    function beginDrag(clientX: number, clientY: number) {
      cancelAnimationFrame(raf);
      dragging = true;
      angularVel = 0;
      angle = angleFromPointer(clientX, clientY);
      lastAngle = angle;
      lastTs = null;
      root!.classList.add(styles.isDragging);
      applyHandle();
    }

    function moveDrag(clientX: number, clientY: number, ts?: number) {
      const next = angleFromPointer(clientX, clientY);
      const delta = shortestDelta(lastAngle, next);
      angle = lastAngle + delta;
      if (ts !== undefined && lastTs !== null) {
        const dt = Math.max((ts - lastTs) / 1000, 0.001);
        angularVel = delta / dt;
      }
      lastAngle = angle;
      lastTs = ts !== undefined ? ts : lastTs;
      applyHandle();
    }

    function endDrag() {
      dragging = false;
      root!.classList.remove(styles.isDragging);
      const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
      if (reduce || Math.abs(angularVel) < 0.02) { angularVel = 0; } else { lastTs = null; raf = requestAnimationFrame(inertiaTick); }
    }

    function onPointerDown(e: PointerEvent) {
      root!.classList.remove("is-demo");
      handle!.setPointerCapture(e.pointerId);
      beginDrag(e.clientX, e.clientY);
      caption!.textContent = "각도만 계산해서 궤도 위를 이동해요";
      e.preventDefault();
    }
    function onPointerMove(e: PointerEvent) {
      if (!dragging) return;
      moveDrag(e.clientX, e.clientY, e.timeStamp);
      e.preventDefault();
    }
    function onPointerUp(e: PointerEvent) {
      if (!dragging) return;
      endDrag();
      caption!.textContent = "끌면 각도만 바뀌며 궤도를 돌아요";
      e.preventDefault();
    }
    handle.addEventListener("pointerdown", onPointerDown);
    handle.addEventListener("pointermove", onPointerMove);
    handle.addEventListener("pointerup", onPointerUp);

    function onKeyDown(e: KeyboardEvent) {
      root!.classList.remove("is-demo");
      if (e.key === "Enter" || e.key === " ") {
        e.preventDefault();
        grabbed = !grabbed;
        handle!.classList.toggle(styles.isGrabbed, grabbed);
        caption!.textContent = grabbed ? "잡았어요. 화살표로 각도를 돌리세요" : "끌면 각도만 바뀌며 궤도를 돌아요";
        return;
      }
      if (!grabbed) return;
      let dir = 0;
      if (e.key === "ArrowLeft" || e.key === "ArrowUp") dir = -1;
      else if (e.key === "ArrowRight" || e.key === "ArrowDown") dir = 1;
      else if (e.key === "Escape") {
        e.preventDefault();
        grabbed = false;
        handle!.classList.remove(styles.isGrabbed);
        caption!.textContent = "끌면 각도만 바뀌며 궤도를 돌아요";
        return;
      } else { return; }
      e.preventDefault();
      cancelAnimationFrame(raf);
      angularVel = 0;
      angle += (dir * ORBIT_KEY_STEP_DEG * Math.PI) / 180;
      applyHandle();
    }
    handle.addEventListener("keydown", onKeyDown);

    applyHandle();

    const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
    let demoRaf = 0;
    if (reduce) {
      root.classList.remove("is-demo");
    } else {
      const hubRect0 = hub.getBoundingClientRect();
      const hx0 = hubRect0.left + hubRect0.width / 2;
      const hy0 = hubRect0.top + hubRect0.height / 2;
      let demoStart: number | null = null;
      function demoTick(ts: number) {
        if (demoStart === null) demoStart = ts;
        const t = ts - demoStart;
        if (t < 200) {
          // 대기
        } else if (t < 1300) {
          const p = (t - 200) / 1100;
          const a = ((-90 + p * 200) * Math.PI) / 180;
          const px = hx0 + Math.cos(a) * (ORBIT_RADIUS_PX + 40);
          const py = hy0 + Math.sin(a) * (ORBIT_RADIUS_PX + 40);
          if (t < 220) beginDrag(px, py);
          moveDrag(px, py, ts);
        } else if (t < 1330) {
          endDrag();
        } else {
          if (t > 1900) demoStart = ts - 60;
        }
        demoRaf = requestAnimationFrame(demoTick);
      }
      demoRaf = requestAnimationFrame(demoTick);
    }

    return () => {
      handle.removeEventListener("pointerdown", onPointerDown);
      handle.removeEventListener("pointermove", onPointerMove);
      handle.removeEventListener("pointerup", onPointerUp);
      handle.removeEventListener("keydown", onKeyDown);
      cancelAnimationFrame(raf);
      cancelAnimationFrame(demoRaf);
    };
  }, []);

  return (
    <main className={styles.stage}>
      <div className={`${styles.ob} is-demo`} ref={rootRef}>
        <div className={styles.ring}></div>
        <div className={styles.hub} ref={hubRef}></div>
        <button
          type="button"
          className={styles.handle}
          ref={handleRef}
          aria-label="고정 반지름 궤도를 도는 핸들. Enter 로 잡고 화살표로 각도를 돌립니다"
        ></button>
        <p className={styles.caption} ref={captionRef}>끌면 각도만 바뀌며 궤도를 돌아요</p>
      </div>
    </main>
  );
}

Open in a new tab

05 Orbit-Handle Drag Where Only the Angle Around a Center Changes — Measured area 11.255% · moving frames 23/23Original by GODRICH · SCSS and React ship in the zip · Drag and Drop Animation CSS: 9 Physics Patterns

The post this demo lives in

Drag and Drop Animation CSS: 9 Physics Patterns - preview of all 9 demos

Drag and Drop Animation CSS: 9 Physics PatternsNine drag and drop animation css builds: A magnetic grid catches the icon inside a 24px radius, a rubber-band edge lets See all demos in this post

05Orbit-Handle Drag Where Only the Angle Around a Center Changes

The post this demo lives in

If you like this effect - similar demos