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>
)
}