Advanced

Draggable

Make any HTML element draggable with full physics support — snapping, flicking, throwing, and spring-based release animations.

createDraggable()

import { createDraggable, createSpring } from 'animejs';

createDraggable('.circle', {
  container: '.wrapper',
  releaseEase: createSpring({
    stiffness: 120,
    damping: 8,
    mass: 1,
  }),
  snap: { x: 50, y: 50 },
});

Options

Property	Default	Description
container	null	CSS selector or element to constrain dragging within
x	true	Allow horizontal dragging
y	true	Allow vertical dragging
snap	null	Snap grid: {x: number, y: number}
releaseEase	'outExpo'	Easing after release (supports spring)
releaseDuration	500	Duration of release animation in ms
releaseVelocity	1	Multiplier for release throw velocity

Callbacks

onGrab — fired when the element is grabbed
onDrag — fired continuously while dragging
onRelease — fired when released
onSnap — fired when element snaps to a grid point
onSettle — fired when release animation completes

Spring Physics

import { createSpring } from 'animejs';

const spring = createSpring({
  stiffness: 200, // spring strength
  damping: 10,   // oscillation dampening
  mass: 1,        // simulated mass
  velocity: 0,   // initial velocity
});