useSpring() doesn't work when animating transform with initial state equal to "translate3d(0,0,0)"

Question

How to use the useSpring() hook?

I'm trying to use the useSpring() hook to animate the transform property:

It simply doesn't work if the initial state is "translate3d(0,0,0)", for instance, if I initialise it like that with toggle being false:

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,0,0)"
});

This, on the other hand, works:

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,1px,0)"
});

Is this a bug? Thanks

Answer 1

You have to explicitly indicate unit of change. Like pixel or percentage. Try this:

const props = useSpring({
  transform: toggle ? "translate3d(0,-25px,0)" : "translate3d(0,0px,0)"
});