useViewport

Returns a Link containing an tuple of numbers representing the x and y position of the referenced element in the viewport. These numbers will range from 0 to 1 when the element is contained within the viewport.

page.tsx

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

export default function Page() {

    const [link, ref] = useViewport();

    return <Animatable animate={{ rotate: link(([_, y]) => `${y * 360}deg`) }}>
        <div ref={ref} style={{
            width: 100,
            height: 100,
            borderRadius: 8,
            backgroundColor: 'var(--f-clr-primary-100)'
        }} />
    </Animatable>;
}

Call signature

1 
const [link, ref] = useViewport<T extends Element = any>(threshold)

Parameters

threshold?: number

The minimum percentage, as a number between 0 and 1, of the element that needs to be visible within the viewport for the returned position to range between 0 and 1.
default = 0.5

Returns

link Link<[number, number]>

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

ref React.MutableRefObject<T>

A React ref to attach to an Element