Skip to main content

How to create scroll gesture

create your app

import { gsap } from 'gsap'
import { useScroll } from 'rege/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 'rege/react'

export const onScroll = ({ active, target, movement: [x, y] }) => {
gsap.to(target, { x, y, scale: active ? 1.2 : 1 })
}

export const App2 = () => {
return (
<Scroll onScroll={onScroll}>
{({ ref }) => <span ref={ref} style={style} />}
</Scroll>
)
}