How to create pinch gesture
create your app
import { gsap } from 'gsap'
import { usePinch } from 'rege/react'
export const App = () => {
const { ref } = usePinch(
({ active, event, target, movement: [x, y] }) => {
event.preventDefault()
x = Math.abs(x) / 100 + 1
y = Math.abs(y) / 100 + 1
gsap.to(target, { scaleX: x, scaleY: y })
}
)
return <span ref={ref} style={style} />
}
with Pinch component
You can use shorthands Pinch component
import { Pinch } from 'rege/react'
export const onPinch = ({ event, target, movement: [x, y] }) => {
event.preventDefault()
x = Math.abs(x) / 100 + 1
y = Math.abs(y) / 100 + 1
gsap.to(target, { scaleX: x, scaleY: y })
}
export const App2 = () => {
return (
<Pinch onPinch={onPinch}>
{({ ref }) => <span ref={ref} style={style} />}
</Pinch>
)
}