I'm currently attempting to utilize calc() within a template string for the following scenario:
<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 challenge here is that there is a template literal nested inside another template literal, and I am uncertain how to resolve this issue to ensure the animation functions correctly.
The objective is to use the calc() function to dynamically resize the <NavBar/> based on font size and viewport dimensions, while also animating the <NavBar/> to move up in the Y-axis when scrolling down (to hide) and appear/move down when scrolling up. The animations are working fine, but integrating the calc() part is proving to be tricky.
If anyone has experience dealing with this type of situation, any guidance or insight would be greatly appreciated.
Thank you for your time and consideration!
Edit: For reference, here's a functional example of the desired outcome without using calc(): Example Link. The lack of calc() functionality is the main obstacle preventing full implementation.