JSFiddle - React, Tailwind, and code Playground

by Mesut Talebi

HTML

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">
<div class="content">
  <div class="firstanimation">
    <h1 data-animation="fadeInUp" style='display: none'>
      This is Title
    </h1>
  </div>
  <div class="secondanimation">
    <p data-animation="wobble" style='display: none'>
      This is Description
    </p>
  </div>
  <div class="lastanimation">
    <p data-animation="bounce" style='display: none'><a href="#">Link</a></p>
  </div>
</div>

JavaScript

// without Queue
function animate(content) {
  if (content) {
    var title = $(content).find('.firstanimation h1');
    var description = $(content).find('.secondanimation p');
    var link = $(content).find('.lastanimation p');

    var titleAnim = "animated " + $(title).data('animation');
    var descAnim = "animated " + $(description).data('animation');
    var linkAnim = "animated " + $(link).data('animation');

    $(title).show().addClass(titleAnim)
      .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(title).removeClass();
        $(description).show().addClass(descAnim)
          .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
            $(description).removeClass();
            $(link).show().addClass(linkAnim)
              .one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
                $(link).removeClass();
              });
          });
      });

  }
};

// With Queue
function animate2(queue) {
  if (queue && queue.length > 0) {
    var elm = queue.shift();

    var animClass = "animated " + $(elm).data('animation');

    $(elm).show().addClass(animClass)
      .on('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function() {
        $(elm).removeClass();
        animate2(queue);
      });
  }
};



$(function() {
  var animationQueue = [
    $('.content').find('.firstanimation h1'),
    $('.content').find('.secondanimation p'),
    $('.content').find('.lastanimation p')
  ];

  animate2(animationQueue);
});