useTrail

useTrail has an identical API signature to useSprings the difference is the hook automatically orchestrates the springs to stagger one after the other.

Usage

With a function & deps

import { useTrail, animated } from '@react-spring/web'

export default function MyComponent() {
  const [trails, api] = useTrail(
    2,
    () => ({
      from: { opacity: 0 },
      to: { opacity: 1 },
    }),
    []
  )

  return (
    <div>
      {trails.map(props => (
        <animated.div style={props}>Hello World</animated.div>
      ))}
    </div>
  )
}

With a config object

import { useTrail, animated } from '@react-spring/web'

export default function MyComponent() {
  const trails = useTrail(2, {
    from: { opacity: 0 },
    to: { opacity: 1 },
  })

  return (
    <div>
      {trails.map(props => (
        <animated.div style={props}>Hello World</animated.div>
      ))}
    </div>
  )
}

Reference

Typescript

function useTrail(count: number, configuration: ConfigObject): SpringValues[]

function useTrail(
  count: number,
  configurationFn: (springIndex: number) => ConfigObject,
  deps?: any[]
): [springs: SpringValues[], api: SpringRef]

Where ConfigObject is described above

TS Glossary

• SpringValues

Examples

Can't find what you're looking for? Check out all our examples!