API Reference / @gtkx/animated / useTrail

Function: useTrail()

Call Signature

useTrail<Props>(length, props, deps?): [Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extends State ? State extends Lookup<any> ? [SpringValues<State>[], SpringRef<State>] : never : never

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:1134

Type Parameters

Props

Props extends object

Parameters

length

number

props

(i, ctrl) => Remap<ControllerUpdate<Lookup<any>, undefined> & { ref?: SpringRef<Lookup<any>> | undefined; }> | Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, UseSpringProps<Props>>>> & { [K in string | number | symbol]: never })[P] }

deps?

readonly any[]

Returns

[Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extends State ? State extends Lookup<any> ? [SpringValues<State>[], SpringRef<State>] : never : never

Call Signature

useTrail<Props>(length, props): SpringValues<[Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? ((...) extends (...) ? (...) : (...)) | ((...) extends (...) ? (...) : (...)) : ((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) extends U ? P extends keyof U ? U[P] : never : never }[P] }>[]

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:1153

This hook is an abstraction around useSprings and is designed to automatically orchestrate the springs to stagger one after the other

export const MyComponent = () => {
 const trails = useTrail(3, {opacity: 0})

 return trails.map(styles => <animated.div style={styles} />)
}

Type Parameters

Props

Props extends object

Parameters

length

number

– The number of springs you want to create

props

Remap<ControllerUpdate<Lookup<any>, undefined> & { ref?: SpringRef<Lookup<any>> | undefined; }> | Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, UseSpringProps<Props>>>> & { [K in string | number | symbol]: never })[P] }

Returns

SpringValues<[Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? ((...) extends (...) ? (...) : (...)) | ((...) extends (...) ? (...) : (...)) : ((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) extends U ? P extends keyof U ? U[P] : never : never }[P] }>[]

Call Signature

useTrail<Props>(length, props, deps): [Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extends State ? State extends Lookup<any> ? [SpringValues<State>[], SpringRef<State>] : never : never

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:1174

This hook is an abstraction around useSprings and is designed to automatically orchestrate the springs to stagger one after the other

export const MyComponent = () => {
 const trails = useTrail(3, {opacity: 0}, [])

 return trails.map(styles => <animated.div style={styles} />)
}

Type Parameters

Props

Props extends object

Parameters

length

number

– The number of springs you want to create

props

Remap<ControllerUpdate<Lookup<any>, undefined> & { ref?: SpringRef<Lookup<any>> | undefined; }> | Props & { [P in string | number | symbol]: (Pick<Props, Exclude<keyof Props, InvalidKeys<Props, UseSpringProps<Props>>>> & { [K in string | number | symbol]: never })[P] }

deps

readonly any[]

– The optional array of dependencies to pass to the internal useSprings hook, therefore is the same as useSprings.

Returns

[Props] extends [Any] ? Lookup<any> : [object] extends [Props] ? Lookup<any> : { [P in string | number | symbol]: { [P in string | number | symbol]: (Props extends { from: From } ? (From extends () => ... ? ReturnType<(...)> : ObjectType<(...)>) | (((...) & (...)) extends never ? ToValues<(...), (...)> : RawValues<(...)>) : (TransitionKey & keyof (...)) extends never ? ToValues<Props, true> : RawValues<Omit<(...), (...)>>) extends U ? P extends keyof U ? U[P] : never : never }[P] } extends State ? State extends Lookup<any> ? [SpringValues<State>[], SpringRef<State>] : never : never