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 🙄