REM Animation

[Jaexplorer]

Hi, 
I currently have an animation that I can't seem to get working with REM units.
1.) Having a look at other posts i've set my previous state like this:
      tl.set(navbarbottom.current, { height: "10rem" });

2. ) With my animation looking like this:
      tl.to(navbarbottom.current, 0.4, { height: "0rem" }).reverse();

3. ) Which would work, except in my CSS i'm changing font-size depending on the screen width/height. 

4. ) So if I do the animation, then resize the screen, my 10rem navbarbottom will not be consistent with other elements that are 10rem.
Sorry, this is all written in react and as such I don't know how to do a codepen for it. Any suggestions on how I can tackle this?
 

[Jaexplorer]

Update:
I found the solution. use fromTo instead, eg:
      .fromTo(navbarbottom.current, 0.4, { height: "10rem" }, { height: "0rem" })

[Bruno Stephen]

Use template string:

 

tl.set(navbarbottom.current, { height: `${10}rem` });

tl.to(navbarbottom.current, 0.4, { height: `${0}rem` }).reverse();

 

work for me!