useScroll

Creates a reactive Link whose value is the current scroll position on the page.

page.tsx

1 
2 
3 
4 
5 
6 
7 
8 
9 
10 
11 
12 
13 
14 
15 
16 
17 
import { useScroll } from '@infinityfx/lively/hooks';

export default function Page() {

    const link = useScroll();

    return <Animatable animate={{ rotate: link(val => `${val.top}deg`) }}>
        <div
            style={{
                width: 100,
                height: 100,
                borderRadius: 4,
                backgroundColor: 'var(--clr-accent)',
                cursor: 'pointer'
            }} />
    </Animatable>;
}

Call signature

1 
const link = useScroll({ restore, target })

Parameters

restore?: number

Duration in seconds to animate the initial scroll position over on page load.
default = 0

target?: React.RefObject<T extends HTMLElement>

A React ref pointing to an HTMLElement for use as the scroll container. If no target is passed the window object will be used as the scroll container.

Returns

link Link<{ x: number; y: number; left: number; top: number; }>

A link which can be used inside the animate property to create an animation.