Skip to main content

How to use drag gesture

create your app

The following app makes a <span/> draggable so that it follows your mouse or finger on drag, and returns to its initial position on release.

import { gsap } from 'gsap'
import { useDrag } from 'rege/react'

export const App = () => {
const { ref } = useDrag(({ active, target, movement: [x, y] }) => {
gsap.to(target, { x, y, scale: active ? 1.2 : 1 })
})
return <span ref={ref} style={style} />
}

with offset

You can use offset instead of movement

import { gsap } from 'gsap'
import { useDrag } from 'rege/react'

export const App2 = () => {
const { ref } = useDrag(({ active, target, offset: [x, y] }) => {
gsap.to(target, { x, y, scale: active ? 1.2 : 1 })
})
return <span ref={ref} style={style} />
}

with Drag component

You can use shorthands Drag component

import { gsap } from 'gsap'
import { Drag } from 'rege/react'

export const onDrag = ({ active, target, movement: [x, y] }) => {
gsap.to(target, { x, y, scale: active ? 1.2 : 1 })
}

export const App3 = () => {
return (
<Drag onDrag={onDrag}>
{({ ref }) => <span ref={ref} style={style} />}
</Drag>
)
}