Skip to main content

How to create wheel gesture

create your app​

import { gsap } from 'gsap'
import { useWheel } from 'reev/gesture/wheel/react'

export const App = () => {
        const { ref } = useWheel(({ 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 Wheel component​

You can use shorthands Wheel component

import { Wheel } from 'reev/react'

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