Link

A Link can be directly created using the useLink hook or indirectly through the useScroll, or useAudio hooks. Links can be used inside the animate property and allow for reactive animations outside of the React render loop. A link can be called as a function, either with no arguments, returning the currently stored value, or with a transform function. In which case it will return another Link which when called without arguments returns the transformed value. This is useful when using a link to animate a property which requires a certain formatting, such as the translate property.

Call signature

1 
2 
3 
const transformed = link<T = any>(transform)

const value = link<T = any>();

Parameters

transform?: (<P = any>(value: T, index: number) => P)[]

A function which takes in the Link value and an optional index which represents the current element being animated inside staggering animations.

Returns

transformed Link<P>

value T

Methods

onchange(): ((callback: (dt: number) => void) => void)[]

Attach an event listener callback to the link to listen for changes.

offchange(): ((callback: (dt: number) => void) => void)[]

Detach an event listener callback from the link.

set(): ((value: T, transition?: number) => void)[]

Update the value of the link. When a transition is specified all linked components will animate to the new value over the defined period in seconds.