#help React-spring transition problem

#help #javascript #react

Hi!

I have a question; how i can achieve a progressive delay in the entry of each element, using react-spring transition.

The first example shown on the react-spring transition oficial page is wrong, the code does not correspond to the animation shown:
https://www.react-spring.io/docs/hooks/use-transition

How could I achieve that same effect?, how I can insert a delay between the input of each component, using a spring easing, like the example?.

When I try the example code, all components enter at the same time.

const [items, set] = useState([...])
const transitions = useTransition(items, item => item.key, {
    from: { transform: 'translate3d(0,-40px,0)' },
    enter: { transform: 'translate3d(0,0px,0)' },
    leave: { transform: 'translate3d(0,-40px,0)' },
})

return transitions.map(({ item, props, key }) =>
    <animated.div key={key} style={props}>{item.text}</animated.div>

Excuse me if it's an absurd question, but the documentation of this library is poor, and I think setting a setTimeout is not the best way...

What method do you currently use to perform the animations in conjunction with React; pure css/sass animations, javascript, styled components, animate.js?

Top comments (2)

Nicolas Terol • Jun 10 '21

Since the link you posted is broken I am not sure what is is you want to achive exactly, but I guess you can use the useChain hookthat will trigger a reaction chain in the animation.
Else you could play with de delay parameter and onRest callback