Give drags physicsGive drags physics

Flick a sheet away

Flick each sheet down fast; only the right one reads speed.

import { animate, motionValue } from "motion";

const SPRING = { type: "spring", duration: 0.5, bounce: 0.2 };
const y = motionValue(0);
y.on("change", (v) => { sheet.style.transform = `translateY(${v}px)`; });

function onRelease({ distance, elapsedMs, height }) {
  const velocity = Math.abs(distance) / elapsedMs;
  const dismiss = distance > height / 2 || (distance > 8 && velocity > 0.11);
  animate(y, dismiss ? height : 0, { ...SPRING, velocity: y.getVelocity() });
}

Throw a card

Throw a card, then catch it mid-flight.

const SPRING = { type: "spring", duration: 0.5, bounce: 0.2 };

card.addEventListener("pointerdown", () => { x.stop(); y.stop(); });
card.addEventListener("pointerup", () => {
  animate(x, 0, { ...SPRING, velocity: x.getVelocity() });
  animate(y, 0, { ...SPRING, velocity: y.getVelocity() });
});

Scroll past the end

Drag or fling each list past its edge.

const rubberband = (overshoot, dimension, c = 0.55) =>
  (1 - 1 / ((overshoot * c) / dimension + 1)) * dimension;

const offset =
  raw > 0   ? rubberband(raw, viewHeight) :
  raw < min ? min - rubberband(min - raw, viewHeight) :
  raw;

animate(y, edge, { type: "spring", duration: 0.5, bounce: 0.2, velocity });

Why it matters, pros and cons