title: styled-components animation back and forth based on props
body: <p>I want to have my main content slide in and back on specific prop</p>
  
  <p>so I created the animation, and I thought I'll add reverse to it in the case the prop changes.</p>
  
  <p>Now the below code works, but the only problem is on the first page load I can see the "slideOutContent" animation</p>
  
  <p>I don't want it to happen, those slides happen only when sidebar is open and then it slides the content.</p>
  
  <pre><code>const slideInContent = keyframes`
    from {
      margin-left: 0;
    }
    to {
      margin-left: 256px;
    }
  `;
  const slideOutContent = keyframes`
    from {
      margin-left: 256px;
    }
    to {
      margin-left: 0;
    }
  `;
  
  // Here we create a component that will rotate everything we pass in over two seconds
  const MainContentBox = styled.div`
    animation: ${props =&gt; props.slide ? `${slideInContent} forwards` : `${slideOutContent}`};
    animation-duration: 0.5s;
    animation-timing-function: linear;
  `;
  </code></pre>
  
  <p>and this is how I use this component:</p>
  
  <pre><code>class PageWithDrawer ... {
  
      constructor(props) {
          super(props);
          this.state = {
              open: false
          };
      }
  
      toggleMenu() {
          this.setState(state =&gt; {
              return { open: !state.open };
          });
      }
  
      render() {
          ....other stuff
  
          &lt;MainContentBox slide={this.state.open}&gt;
                {this.props.children}
          &lt;/MainContentBox&gt;
  
          ....other stuff
      }
  </code></pre>