title: Prevent Scrollbar Appearing on transform: translate with React-Spring
body: <p>Whenever I add a <code>translate()</code> CSS function to a <code>react-spring</code> <code>useTransition</code> hook <code>from</code> or <code>leave</code> property where the element will go out of the viewport, I am getting a vertical/horizontal scrollbar.</p>
  
  <pre><code>const transitions = useTransition(show, null, {
      from: {
          opacity: 0,
          transform: "translate3d(500px,0px,0px) scale(1)"
      },
      enter: {
          opacity: 1,
          transform: "translate3d(0px,0px,0px) scale(1)"
      },
      leave: {
          opacity: 0,
          transform: "translate3d(0px,-500px,0px) scale(1)"
      },
      config: {
          duration: 3000
      }
  });
  </code></pre>
  
  <p><a href="https://i.stack.imgur.com/JQpUd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JQpUd.png" alt="enter image description here"></a></p>
  
  <p>I know this is expected and the general solution is to add <code>overflow: hidden</code> to the <code>body</code>.</p>
  
  <p>But I am unsure how to do this while the animation is occurring? As I don't want to add <code>overflow: hidden</code> to the <code>body</code> at all times as I do need access to the scrollbar in certain pages, just not when the animation has initiated?</p>
  
  <p>Here is a <a href="https://codesandbox.io/s/ee19d?fontsize=14&amp;hidenavigation=1&amp;theme=dark" rel="nofollow noreferrer">CodeSandbox</a> to try it out for yourselves</p>
  
  <p>Any help would be greatly appreciated.</p>