Trail

import { Trail, animated } from 'react-spring'

Creates multiple springs with a single config, each spring will follow the previous one. Use it for staggered animations.

If you re-render the component with changed props, the animation will update.

<Trail items={items} opacity={1}>
    {...}
</Trail>

You will get an API object back. It will not cause the component to render like an overwrite would (the animation still executes of course). Handling updates like this is useful for fast-occurring updates, and you should generally prefer it as it's more powerful. Further documentation can be found in Imperatives & Refs

const springRef = new SpringRef()

<Trail ref={springRef} items={items} opacity={1}>
    {...}
</Trail>

// Update trail
springRef.start({ opacity: 0 })
// Stop trail
springRef.stop()

The return value is an array containing animated props.

;(item) => (styles) => <animated.div style={styles}>{item.text}</animated.div>

All properties of the shared-api apply.