Using <Motion/> with css calc()

[fev4]

I'm trying to accomplish the following while using Fluid Typography/UI:

<Motion
  defaultStyle={{
    y: 0,
    opacity: 1
  }}
  style={{
    y: spring(this.state.navBarOpen ? 0 : `- calc(3.25em + 0.5vw)`),
    opacity: spring(this.state.navBarOpen ? 1 : 0)
  }}
>
  {style => (
    <NavBar
      style={{
        transform: `translateY(${style.y})`,
        opacity: style.opacity
      }}
      clickedOpenMenu={this.onClickMenuSwitchHandler}
    />
  )}
</Motion>

But it doesn't. In the end we would have a literal inside another. How can I avoid this and in the end achieve the desires result of translateY(- calc(3.25em + 0.5vw))? Any experience with this?

Thanks for you time and thanks for reading!

Edit: Here's a working example of what I'd like to achieve. In this case I'm not using calc() there, but that's the problem.

[nkbt]

ReactMotion is a pure JavaScript solution. It is not possible to use css calc as part of styles object. It was unfortunate naming, it is just a map of interpolated numbers, not actual styles.

[nkbt]

0.5vw is window.innerWidth * 0.05 I guess... You can use it instead. 3.25em is harder though still possible.

[fev4]

Thank for the help @nkbt ! Solved it with your last comment.