Skip to main content

How to create wheel gesture

create your app

import { gsap } from 'gsap'
import { useWheel } from 'rege/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 onWheel = ({ 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 onWheel={onWheel}>
{({ ref }) => <span ref={ref} style={style} />}
</Wheel>
)
}