メインコンテンツまでスキップ

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