Problem with multiple animation steps

[arturhenryy]

Hello i am quite new to react-spring and i am struggling to figure out what i am doing wrong here.
I have a button that should turn into a progress bar with multiple steps of animation:

 const buttonAnimationProps = useSpring({ ref: buttonSpringRef, width: "40px", left: "0", to: [ { width: "170px", backgroundColor: "#739FBC", config: { duration: 400 } }, { width: "40px", backgroundColor: "#0B64A0", config: { duration: 200 } }, { width: "40px", left: "0", config: { duration: 200 } }, { width: "20%", config: { duration: 600 } }, // Start of progress bar animation { width: "40%", config: { duration: 600 } }, { width: "60%", config: { duration: 600 } }, { width: "80%", config: { duration: 600 } }, { width: "100%", config: { duration: 300 } }, ], from: { width: "140px", left: "100%", backgroundColor: "#0B64A0" }, }); 

so i would expect the steps from Start of progress bar animation happen consecutively but so it animates first to 20% in 600ms than 40% in 600ms and so on, but somehow it happens all at once and the progress bar animation delays for some time and then goes to 100% all at once.

[arturhenryy]

ok solved it, i had a
transition: "all 0.3s ease"
on the element to be animated lol 🙄