[SOLVED] useSpring weird behaviour when undoing transform back to zero

useSpring weird behaviour when undoing transform back to zero

I am using a basic useSpring hook to animate transform property:

 const props = useSpring({
    to: {
      transform: open ? 'translateY(-50px)' : 'translateY(0)',
    },
  })

which works fine in v8 but in v9, the reverse of the animation only works when you start it before the end of the initial animation

I have uploaded a minimal example. if you open the sandbox, it has the problem I'm describing . when you click, it starts animating, if you wait unitil finish & then click again, it jumps to starting point & doesn't animate, but if you click during the initial animation, it would work as expected.

this behaviour only happens in version 9. you can change the version in the sidebar to v8 and see that the problem doesn't exist anymore. I'm trying to achieve the same effect with v9.

Solution

I found what the problem was & it was the silliest thing. apparantly react-spring v9 doesn't understand "translateY(0)" & needs the unit; so "translateY(0px)" would work just fine.