design-infraReport a problem or share feedback← Catalog
Value transform & path drawing
freemotion/use-transform
An example of linking SVG path length to a drag gesture using Motion for React's easy useTransform hook.
$
pnpm add motion # then adapt the free source from https://motion.dev/examples/react-use-transformnpm deps: motion
- Source
- Motion (motion.dev)
- Kind
- transition
- Categories
- transition, form
- Use as
- recipe — technique you apply to your own markup
- Applies to
- form
- Motion
- on drag · medium · motion · medium cost
- Tags
- motion, useMotionValue, useTransform, drag
- Licence
- motion / motion/react / motion-v are MIT. Motion+ (premium components, example source, AI Kit pro tools) is paid — one-time Personal licence or per-seat Business.
- Live demo
- motion.dev
- Docs
- motion.dev
Similar
Compare all 4 →- Clerk: Conditional Fieldmotion/clerk-conditional-fieldA password field that animates into a sign-in form only when it's needed. The container animates its measured height with Motion's resize() util while the field fades in.
- Success checktransitions/success-checkSpinner → checkmark morph for completed actions.
- Checkbox checktransitions/checkbox-checkCheckboxes, to-do completion, multi-select rows — any boolean control where the checked state should feel earned. The box's background fills first, then the checkmark draws itself via stroke-dashoffset after a short delay; unchecking reverses quickly with no draw.