title: How do I delay a css animation till I have scrolled to the element in React?
body: <p>I have built an animation similar to this and now I want to ensure that it will play only when the user has scrolled to a certain location such that the content being animated is actually visible. How do I do that inside a React App ?<br>
  I have tried reading up on the problem but most solutions either point to <em>jQuery</em> or <em>Animate.css</em> or <em>waypoint js</em>.  </p>
  
  <hr>
  
  <ol>
  <li>Is there any way to do this without using any of these ? </li>
  <li>How does React and jQuery work together without causing a conflict ? (I ask because I am also using react-bootstrap and they explicitly state that they have built it from scratch to avoid using jQuery with React) Where should i even write the jQuery code ?</li>
  </ol>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body{
    font-family: Helvetica, Arial, sans-serif;
  }
  .container{
    width: 50%;
    margin: 0 auto;
  }
  @keyframes load{
    from {
      width: 0%
    }
  }
  @-webkit-keyframes load{
    from {
      width: 0%
    }
  }
  @-moz-keyframes load{
    from {
      width: 0%
    }
  }
  @-o-keyframes load{
    from {
      width: 0%
    }
  }
  
  .bar{
    background-color: #EEE;
    padding: 2px;
    border-radius: 15px;
    margin-bottom: 5px;
    font-size: 14px;
    color: #FFF;
    font-weight: bold;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.5);
  }
  .bar::before{
    content:  attr(data-skill);
    background-color: #f3b0ff;
    display: inline-block;
    padding: 5px 0 5px 10px;
    border-radius: inherit;
    animation: load 2s 0s;
    -webkit-animation: load 2s 0s;
    -moz-animation: load 2s 0s;
    -o-animation: load 2s 0s;
  }
  
  .bar.front::before{
    background-color: #ffcc33;
  }
  .bar.back::before{
    background-color: #a6cfe3;
  }
  
  .bar.learning::before{
    width: calc(20% - 10px);
  }
  .bar.basic::before{
    width: calc(40% - 10px);
  }
  .bar.intermediate::before{
    width: calc(60% - 10px);
  }
  .bar.advanced::before{
    width: calc(80% - 10px);
  }
  .bar.expert::before{
    width: calc(100% - 10px);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>  &lt;div class="container"&gt;
      &lt;h1&gt;Skill Set&lt;/h1&gt;
      &lt;div class="bar learning" data-skill="TDD"&gt;&lt;/div&gt;
      &lt;div class="bar back basic" data-skill="Python"&gt;&lt;/div&gt;
      &lt;div class="bar back intermediate" data-skill="C#"&gt;&lt;/div&gt;
      &lt;div class="bar front advanced" data-skill="CSS3"&gt;&lt;/div&gt;
      &lt;div class="bar front expert" data-skill="HTML5"&gt;&lt;/div&gt;
  
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>