title: Transform: Translate Animation not working
body: <p>I am wanting to achieve a "blind effect" where clicking on a button will cause an overlay div to animate up so only a small portion shows at the top of the screen and it reveals a div below.</p>
  
  <p>I am using gatsby, with react spring and styled components. I have set the "blind"  up as a component as follows:-</p>
  
  <pre><code>const HeroWrapper = styled(animated.div)`
    background-color: blue;
    height: 100vh;
    width: 100vw;
    text-align: center;
    position: fixed;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    z-index: 15;
  `
  const HeroTitle = styled.h1`
    margin: auto;
    color: whitesmoke;
  `
  
  const Hero = () =&gt; {
    const [isHeroOpen, setHeroOpen] = useState(true)
    const heroAnimation = useSpring({
      transform: isHeroOpen ? `translate3d(0,0,0)` : `translate3d(0, -85%, 0)`,
    })
  
    return (
      &lt;HeroWrapper style={heroAnimation} onClick={() =&gt; setHeroOpen(!isHeroOpen)}&gt;
        &lt;HeroTitle&gt;I am a Hero Blind&lt;/HeroTitle&gt;
        &lt;div style={{ paddingBottom: '40px' }}&gt;
          &lt;button type="button" onClick={() =&gt; setHeroOpen(!isHeroOpen)}&gt;
            Click
          &lt;/button&gt;
        &lt;/div&gt;
      &lt;/HeroWrapper&gt;
    )
  }
  </code></pre>
  
  <p>However the animation does not work with the transform:translate.
  If I replace this with an animation on the background color...</p>
  
  <pre><code>    backgroundColor: isHeroOpen ? `#66666666` : `green`,
  </code></pre>
  
  <p>...it works fine so all is working with the state toggle.</p>
  
  <p>Also if I amend the transform:translate in the developer tools it also works -  so what am I doing wrong?</p>
  
  <p>Many thanks</p>