title: Shuffling Text Loops using Animate.css
body: <p>Okay I am trying to make a page that cycles through terms using random entrances and exits (powered by <a href="https://daneden.github.io/animate.css/" rel="nofollow">animate.css</a>). I think my logic is pretty straightforward and in theory should work. However, when the page loads their is a long delay and then just the word "term 1" appears using a random entrance but does not exit.</p>
  
  <p>Here is my code:</p>
  
  <p>[html]</p>
  
  <pre><code>&lt;div id="rotate"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>[js]</p>
  
  <pre><code>var terms = ["term 1", "term 2", "term 3", "term 4"];
  var entrances = ["animated bounceInLeft", "animated fadeInLeft", "rotateInDownLeft", "rotateInUpLeft",
      "slideInLeft", "zoomInLeft", "rollIn"];
  var exits = ["animated bounceOutRight", "animated fadeOutRight", "rotateOutDownRight", "rotateOutUpRight",
      "slideOutRight", "zoomOutRight", "rollOut"];
  var count = 0;
  
      function rotateTerm() {
          if (terms[count] &lt; terms.length) {
              wordGen(terms[count]);
          }
          else {
              count = 0;
              wordGen(terms[count])
          }
          count += 1;
          rotateTerm();
      }
  
      function wordGen(t) {
          $("#rotate").text(t).addClass(entrances[Math.floor((Math.random() * entrances.length))])
                  // the following code waits for the animation from 
                  // the entrance to end then performs the function()
                  .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', 
                   function () {
                      $("#rotate").text(t).addClass(exits[Math.floor((Math.random() * exits.length))])
                  })
      }
  window.onload = rotateTerm();
  </code></pre>
  
  <p>Any assistance on what I am doing wrong? Or a better approach? Or anything in general!</p>