usePath

Allows for animating an element along an SVG path. The usePath hook returns a function that takes 1 argument, a transform function which itself takes 2 arguments; the current position in the form [x, y] and an optional index. The index represents the current element being animated inside staggering animations.

page.tsx

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

export default function Page() {

    const [func, ref] = usePath();

    return <>
        <Animatable animate={{ translate: func(([x, y]) => `${x - 100}px ${y - 100}px`), duration: 4, repeat: Infinity, easing: 'linear' }} triggers={[{ on: 'mount' }]}>
            <div style={{
                position: 'absolute',
                width: 100,
                height: 100,
                borderRadius: 100,
                backgroundColor: 'var(--clr-accent)'
            }} />
        </Animatable>

        <svg width={200} viewBox="0 0 200 200" fill="none">
            <circle ref={ref} r={100} cx={100} cy={100} />
        </svg>
    </>;
}

Call signature

1 
const [func, ref] = usePath()

Returns

func: ((transform: (value: [number, number], index: number) => any))[] => AnimatableFunction

ref React.Ref<SVGGeometryElement>

A React ref to attach to an SVGGeometryElement