Motion that settles, and never overshoots. Placement that knows where panels belong.

import { createFrameLoop, createSettle } from "@n-uf/motion";
import { createBrowserClock } from "@n-uf/motion/browser";

const box = document.querySelector<HTMLElement>("#box")!;
const loop = createFrameLoop({ clock: createBrowserClock() });
const x = createSettle(0); // 90 % of the way in 92 ms, never past the target
let moving = false;

addEventListener("click", (e) => {
  x.setTarget(e.clientX); // a retarget goes on from where the box is drawn
  if (moving) return;
  moving = true;
  loop.repeat("write", (frame) => {
    moving = x.step(frame.delta);
    box.style.transform = `translateX(${x.value}px)`;
    return moving; // the loop idles once it rests
  });
});

Move one element with no overshoot: a settle launched from where it is drawn, stepped by one frame loop that idles at rest. The window motion rules · API on GitHub↗ (opens in a new tab)

import { createFrameLoop } from "@n-uf/motion";
import { createBrowserClock } from "@n-uf/motion/browser";
import { createLayoutMotion, domDrawable } from "@n-uf/motion/layout";

const loop = createFrameLoop({ clock: createBrowserClock() });
const motion = createLayoutMotion({ loop }); // frames run only while something moves

const node = document.querySelector<HTMLElement>("#panel")!;
const panel = motion.add("panel", domDrawable({ node }), { x: 0, y: 0, width: 320, height: 200 });

// Your layout picks the rects. The panel glides from where it is drawn;
// its content is laid out once at 480 px and revealed, never stretched.
document.querySelector("#wider")!.addEventListener("click", () => {
  panel.moveTo({ x: 40, y: 0, width: 480, height: 200 });
});

Give each item a rect: the real element glides there from where it is drawn, and a new size is revealed, never stretched. Stretch versus reveal · API on GitHub↗ (opens in a new tab)

import { createFrameLoop } from "@n-uf/motion";
import { createBrowserClock } from "@n-uf/motion/browser";
import { createDragIntent, type DragTarget } from "@n-uf/motion/drag";

const targets: DragTarget[] = [
  { id: "tabs", priority: 1, hit: { x: 240, y: 0, width: 720, height: 36 } },
  { id: "sidebar", priority: 2, hit: { x: 0, y: 0, width: 240, height: 600 } },
];
const intent = createDragIntent({ home: { x: 600, y: 240, width: 200, height: 120 } });
const indicator = document.querySelector<HTMLElement>("#indicator")!;
let pointer = { x: 700, y: 300 };
addEventListener("pointermove", (e) => (pointer = { x: e.clientX, y: e.clientY }));

// Once a frame, also while the pointer rests: a dwell is time passing.
const loop = createFrameLoop({ clock: createBrowserClock() });
const stop = loop.repeat("input", (frame) => {
  const { shown } = intent.update(pointer, frame.time, targets);
  indicator.hidden = !shown; // only once the pointer aims, no flicker on borders
});
addEventListener("pointerup", () => {
  stop();
  console.log("lands on", intent.release(pointer, targets)?.id ?? "home");
});

Feed it the pointer once a frame and plain-data targets: it says what the drop indicator shows and what a release lands on. The drag-intent model · API on GitHub↗ (opens in a new tab)