How to create scroll gesture
create your app
import { gsap } from 'gsap'
import { useScroll } from 'reev/gesture/scroll/react'
export const App = () => {
const { ref } = useScroll(({ active, target, offset: [x, y] }) => {
gsap.to(target, { x, y, scale: active ? 1.2 : 1 })
})
return <span ref={ref} style={style} />
}
with Scroll component
You can use shorthands Scroll component
import { Scroll } from 'reev/gesture/scroll/react'
export const scroll = ({ active, target, movement: [x, y] }) => {
gsap.to(target, { x, y, scale: active ? 1.2 : 1 })
}
export const App2 = () => {
return <Scroll scroll={scroll}>{({ ref }) => <span ref={ref} style={style} />}</Scroll>
}