nanime
Composables

useDraggable

Drag elements with snap, bounds and axis constraints using AnimeJS createDraggable().
Buffered

useDraggable wraps the createDraggable function from AnimeJS. It makes an element draggable once the component mounts.

nanime rebuilds the draggable when target, trigger or container points to a new element, and keeps it disabled across the rebuild if it was. It reverts when the component unmounts.

Usage

0%
35%
75% 
import { spring } from '#nanime/easings'

const container = useTemplateRef('container')
const draggable = useTemplateRef('draggable')

useDraggable(draggable, {
  container: container,
  releaseEase: spring({
    bounce: 0.65,
    duration: 400,
  }),
  x: {
    snap: (draggable) => {
      const hw = (draggable?.dragArea || [0, 0, 0, 0])[2]
      const results = [0, hw * 0.35, hw * 0.75]
      return results
    },
  },
})
View on GitHub

Signature

function useDraggable(
  target: DraggableTypes['target'],
  options?: DraggableOptions
): BufferedProxyReturns<Draggable>

Parameters

target
DraggableTypes['target'] required
The DOM element to make draggable. Accepts CSS selectors, DOM elements, and template refs. Keep CSS transitions off its transform, since AnimeJS writes it on every frame of a drag.
options
DraggableOptions
See the AnimeJS draggable documentation for the options.
trigger and container also accept template refs and component refs. snap (also inside x and y), dragSpeed, scrollSpeed, scrollThreshold, containerPadding, containerFriction, minVelocity, maxVelocity and velocityMultiplier also accept a ref, and a change updates the draggable in place.

Returns

Returns a buffered proxy around the AnimeJS Draggable. Its methods and properties are in the AnimeJS draggable documentation. The draggable is created when the component mounts. Methods such as disable() can be called straight from setup(), and run at that point. Read properties such as x and y after mount.

Caveats

Read properties after mount

// wrong: reading position before mount returns undefined
const draggable = useDraggable('.card')
console.log(draggable.x) // undefined

// right: read coordinates after mount or inside interaction callbacks
onMounted(() => {
  console.log(draggable.x)
})

The underlying Draggable instance is constructed after the component mounts and resolves its target element. Chainable methods buffer safely before mount, but property reads and non-chainable helper methods return undefined until the instance exists. Access coordinates inside lifecycle hooks or callbacks such as onDrag.

Type reference

See also

useScrambleText

Scramble and reveal text with AnimeJS scrambleText().

useAnimeTimeline

Sequence animations on one clock with AnimeJS createTimeline().

Copyright © 2026