ReactJS react-motion with calc() from CSS

Question

I'm trying to accomplish the following while using calc() inside a template string:

<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>

The problem here is that there's a template literal within a template literal and I don't know how to avoid this problem in order to make the animation work.

I need the calc() in order to actively resize the <NavBar/> according to the font size and the view port, but I also want the <NavBar/> to be animated by going up in translateY while I scroll down (be hidden) and appear / go down when I scroll up. I've already got all working but I'm just missing this calc() part.

I'm just not sure how to handle this while combining both things. Does anyone have any experience with this? Any help would be appreciated.

Thanks for your time, and thanks for reading!

Edit: Here's a working example of what I want to achieve. I'm not using calc() there and that's the problem, but this is just to show the desired goal.

score 1 · Accepted Answer · answered Nov 01 '18 at 05:55

Managed to solve this by doing the calculation outside the scope of <Motion>. So something like this:

let calc, vw, em

class Layout extends Component {

  componentDidMount(){
    vw = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
    em = scales.baseFont
    calc = 3.25 * em + 0.5 * 0.01 * vw
  }
  render () {

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

Perhaps this was not the best decision but it works. I'm pretty new to programming, so if somebody knows something better please let me know! Always willing to learn.

ReactJS react-motion with calc() from CSS

1 Answers1