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)
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 andonRest
callbackI have exactly the same question. Does anyone have an answer to this?