title: Reset CSS animation with fullpage.js
body: <p>I'm currently building a website with <a href="http://alvarotrigo.com/fullPage/" rel="nofollow">fullPage.js</a> and <a href="https://daneden.github.io/animate.css/" rel="nofollow">animate.css</a>. I'm trying to make the CSS animation in animate.css replay every time I scroll to the section where the element displays. </p>
  
  <p>The problem is: It slides out after I scroll to the next section, but when I go back to that section again, the element is gone and doesn't slide in again.</p>
  
  <p>This is the method I have tried (did not work properly):</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#fullpage').fullpage({
    onLeave: function(index, nextIndex, direction) {
      $('#text').removeClass('animated slideInLeft');
      $('#text').addClass('animated slideOutRight');
    },
    afterLoad: function(anchorLink, index) {
      $('#text').addClass('animated slideInLeft');
    }
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#first {
    background-color: yellow;
  }
  #second {
    background-color: blue;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.js"&gt;&lt;/script&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" rel="stylesheet" /&gt;
  &lt;link href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/2.7.9/jquery.fullPage.css" rel="stylesheet" /&gt;
  
  &lt;div id="fullpage"&gt;
  
    &lt;div class="section" id="first"&gt;
      &lt;center&gt;
        &lt;p id="text"&gt;Something&lt;/p&gt;
      &lt;/center&gt;
    &lt;/div&gt;
  
    &lt;div class="section" id="second"&gt;
      &lt;h2&gt;Something else&lt;/h2&gt;
    &lt;/div&gt;
  
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>