JSFiddle - React, Tailwind, and code Playground

by ruisoftware

HTML

<a href="#">horizontal</a>
<a href="#">horizontal-reverse</a> 
<a href="#">diagonal</a>
<a href="#">diagonal-reverse</a>  
<a href="#">random</a>
<a href="#">lines-vertical</a> 
<a href="#">lines-vertical-reverse</a>  
<a href="#">spiral</a> 

<div id="grid"> </div>

CSS

#grid{position:relative;}

a{display:block;float:left;margin-left:250px;}

.block{
    position:absolute;
    width: 18px;
    height: 18px;
    background: pink; 
}

JavaScript

var grid = $('#grid');
$('a').click(function () {

  $('.block').remove();
  var cols = 10,
      rows = 10;

  // create 10 x 10 blocks
  for (var i = 0; i < (rows * cols); i++) {
    grid.append($('<div />').addClass('block').addClass('block-' + i));
  }

  // position them in a grid
  var n = 0;
  for (y = 0; y < rows; y++) {
    for (x = 0; x < cols; x++) {
      $('.block-' + n, grid).css({
        left: x * 20,
        top: y * 20
      });
      ++n;
    }
  }

  switch ($(this).text()) {

  case 'horizontal-reverse':

    $('.block', grid).css({
      'opacity': 0
    }).each(function (i) {
      $(this).stop().delay(30 * (rows * cols - i)).animate({
        'opacity': 1
      }, {
        duration: 420,
        complete: (i !== 0) ||
        function () {
          alert('done'); // fire next animation... 
        }

      });
    });

    break;


  case 'horizontal':
    $('.block').css({
      'opacity': 0
    }).each(function (i) {
      $(this).stop().delay(30 * i).animate({
        'opacity': 1
      }, {
        duration: 420,
        complete: (i !== rows * cols - 1) ||
        function () {
          alert('done'); // fire next animation... 
        }

      });
    });
    break;

  case 'diagonal':
    $('.block', grid).css({
      'opacity': 0
    });
    n = 0;
    for (var y = 0; y < rows; y++)
    for (var x = 0; x < cols; x++) {
      $('.block-' + n, grid).stop().delay(100 * (x + y)).animate({
        opacity: 1
      }, {
        duration: 420,
        complete: (n !== rows * cols - 1) ||
        function () {
          alert('done'); // fire next animation... 
        }
      });
      ++n;
    }



    break;

  case 'diagonal-reverse':
    $('.block', grid).css({
      'opacity': 0
    });
    n = 0;
    for (var y = 0; y < rows; y++)
    for (var x = 0; x < cols; x++) {
      $('.block-' + n, grid).stop().delay(100 * (rows - y + cols - x)).animate({
        opacity: 1
      }, {
        duration: 420,
        complete: (n !== 0) ||
...