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.

Importing

1 
import { usePath } from '@infinityfx/lively/hooks';

Usage

Call signature

1 
const [ref, func] = usePath()

Returns

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

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

ref:React.Ref<SVGGeometryElement>

A React ref to attach to an SVGGeometryElement