can't get the chain effect working with useChain by react-spring

Question

I am new to use react-spring. Currently(writting a react webapp with typescript), i am trying to apply the useChain chaining up three useSpring but what i come out with is all animation starts at the same time.....but i suppose it should have the chained animation effect (animation run one after one)...it will be so much appreciated if someone can give me some hints or experience sharing. Thanks in advance.

Here below first section is what i set up with a button to fire the chained useSpring animations. (in fact, if someone knows, i also found that it doesn't allow me to put just what i wanted to changed in the "to" values....instead, if i put exactly what i put in the "from" to the "to"...like below...it's different from what i learned from react-spring homepage, that I should be allowed to put in the "to" for only what i want to change from the "from")

const [move, setMove] = useState(false)

    const text1Ref = useRef(null);
    const text2Ref = useRef(null);
    const text3Ref = useRef(null);

    const text1Style = useSpring({
       from: {zIndex: 1, left: "25%", top: "50%", transform: `translate(-50%,-50%)`},
       to: {zIndex: 1, left: "25%", top: "50%", transform: move? `translate(-50%,-20%)` : `translate(-50%,-50%)`},
       ref: text1Ref,
    })
   
    const text2Style = useSpring({
       from: {zIndex: 1, left: "50%", top: "50%", transform: `translate(-50%,-50%)`},
       to: {zIndex: 1, left: "50%", top: "50%", transform: move? `translate(-50%,-100%)` : `translate(-50%,-50%)`},
       ref: text2Ref,
    })

    const text3Style = useSpring({
        from: {zIndex: 1, left: "75%", top: "50%", transform: `translate(-50%,-50%)`},
        to: {zIndex: 1, left: "75%", top: "50%", transform: move? `translate(-50%,-30%)` : `translate(-50%,-50%)`},
        ref: text3Ref,
     })


useChain([text1Ref, text2Ref, text3Ref])

I even tried to put the timeSteps as following...it doesn't show any delay

useChain([text1Ref, text2Ref, text3Ref], [0, 0.9))

here below are the three divs that i would like to "move up" or "move down" after firing the button in chained effect.

<animated.div style={text1Style} className="drawer" >Top 1</animated.div>
<animated.div style={text2Style} className="drawer" >Top 2</animated.div>
<animated.div style={text3Style} className="drawer" >Top 3</animated.div>

I tried to upgraded to V9 before but for some reasons there were some other written animations not working with the V9 so i went back to V8.

Answer 1

I think it is a problem in version 8. Try moving up the version a little. It works from version 9.0.0-beta.4. Or you can try to move to the version 9.0.0-rc.3. But in that case you have to modify your code because the change in api.

This is the documentation of version 9 api. https://aleclarson.github.io/react-spring/v9/#Revamped-types

If you want to maintain you project on the long run, I recommend to change to the latest version 9, sooner or later.

Here is the working example with beta 4:

https://codesandbox.io/s/usechain-example-r3ngb