How to create pinch gesture

create your app

import { gsap } from 'gsap'
import { usePinch } from 'reev/gesture/pinch/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 'reev/gesture/pinch/react'

export const pinch = ({ 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 pinch={pinch}>{({ ref }) => <span ref={ref} style={style} />}</Pinch>
}