Skip to main content

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