Search code examples
reactjsreact-hooksreact-spring

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

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

Solution

  • 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)"
});