Skip to content

API Reference / @gtkx/animated / useChain

Function: useChain() ​

useChain(refs, timeSteps?, timeFrame?): void

Defined in: node_modules/.pnpm/@react-spring+core@10.1.2_react@19.2.8/node_modules/@react-spring/core/dist/react-spring_core.modern.d.mts:1059

Used to orchestrate animation hooks in sequence with one another. This is best used when you specifically want to orchestrate different types of animation hook e.g. useSpring & useTransition in sequence as opposed to multiple useSpring hooks.

jsx
export const MyComponent = () => {
 //...
 useChain([springRef, transitionRef])
 //...
}

Parameters ​

refs ​

readonly SpringRef<Lookup<any>>[]

– An array of SpringRefs.

timeSteps? ​

number[]

– Optional array of numbers that define the delay between each animation from 0-1. The length should correlate to the length of refs.

timeFrame? ​

number

– Optional number that defines the total duration

Returns ​

void