Beta Status

This library is still in early beta and the API is subject to change and may get daily breaking changes. The documentaton may not be up to date with the latest features and include missing or outdated information. You can always create an issue on GitHub or even better a pull request to fix the documentation or add new features.

Drag

Drag is built into motion elements and works with whileDrag animations.

Basic drag

<motion.div drag />

Axis locking:

<motion.div drag="x" />
<motion.div drag="y" />

Constraints

You can constrain drag to a bounding box or an element.

let constraints!: HTMLDivElement;

<div ref={constraints} class="relative">
  <motion.div drag dragConstraints={constraints} />
</div>;

<motion.div
  drag
  dragConstraints={{ left: -20, right: 20, top: -10, bottom: 10 }}
/>

Options

  • dragElastic: control how far the element can stretch past constraints.
  • dragMomentum: set false to disable inertia.
  • dragDirectionLock: lock to the initial drag axis.
  • dragPropagation: allow nested draggables to activate.
  • dragSnapToOrigin: snap back to the start on release.
  • dragTransition: transition for the release animation.
  • dragListener: set false to disable pointer listeners (use controls).

Drag controls

import { createDragControls } from "motion-solid";

const controls = createDragControls();

<motion.div drag dragControls={controls} dragListener={false} />
<button onPointerDown={(event) => controls.start(event)}>Drag</button>

Callbacks

<motion.div
  drag
  onDragStart={(event, info) => console.log("start", info)}
  onDrag={(event, info) => console.log("drag", info)}
  onDragEnd={(event, info) => console.log("end", info)}
  onDirectionLock={(axis) => console.log("lock", axis)}
  onDragTransitionEnd={() => console.log("transition done")}
/>