Unable to animate synchronously

[tingyuzeng]

Hello all, I have problems with synchronous animation with useSpring. Could you please help?

It is a fairly simple burger menu component. I noticed that when closing the menu, the second div animates first than the other two. As a result it looks super weird. The live code can be found here: https://codesandbox.io/s/burger-ngp4i

I tried useChain as well: useChain([springRef1, springRef2, springRef3],[0,0,0]) on my local machine. But it doesn't help...

Please see the movie below:
https://user-images.githubusercontent.com/75454664/118398815-89320280-b65a-11eb-964a-c34d818ac961.mov

[joshuaellis]

You should probably use useSprings and use the api return. Check this sandbox out! https://codesandbox.io/s/burger-forked-bgqxi?file=/src/BurgerMenu.js

[tingyuzeng]

Thank you!