0Pricing
React Academy · Lesson

useTrail and useChain for Sequences

Stagger animations across multiple elements with useTrail and orchestrate sequences with useChain.

useTrail for Staggered Animations

useTrail(count, config) creates count springs that animate in sequence with a configurable delay between each one. When the trail starts, the first item animates immediately, the second starts slightly after, the third after that, and so on — creating a fan-out or cascade effect.

useTrail Return Value

useTrail returns an array of spring objects, one for each item in the trail. Each spring has the same shape (same keys) but starts its animation at a different time offset. You map over both the trail array and your items array simultaneously to render each animated item with its corresponding spring.

All lessons in this course

  1. React Spring Core: useSpring Hook
  2. Animated Components and Style Interpolation
  3. useTrail and useChain for Sequences
  4. Gesture-Driven Animations with use-gesture
← Back to React Academy