JSFiddle - React, Tailwind, and code Playground

Isotope ImageLoaded (old way)

by Snj

HTML

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.js"></script>
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.js"></script>
<div id="headmenu"><button id="more">append more items</button><input id="quickSearch" class="mini quickSearch" placeholder="Filter by tags..." type="text"><button id="remove">remove hiddenTab class</button></div>
<div id="container" class="container no-animation">
<div id="loadingBlock" class="loadingBlock"></div><div id="loading" class="loading"><span></span><span></span><span></span><span></span><span></span></div>
<div class="grid-sizer"></div>
</div>

CSS

html, body {
    display: flex;
    color: #b2b2b2 !important;
    flex-flow: column;
	  padding: 0;
    margin: 0;
    height: 100%;
    padding-bottom: 0px !important;
    overflow-x: hidden;

}
/*.box {
  line-height: 0;
}*/
#headmenu {
    position:fixed; /* fixing the position takes it out of html flow */
    left:0;			/* top left corner should start at leftmost spot */
    top:0;			/* top left corner should start at topmost spot */
    width:100%;		/* take up the full browser width */
    height:25px; 	/* define height so you can define for content */
    z-index:200;	/* high z index so other content scrolls underneath */
    background: grey;
}
.container {
    /*width: 0px;
    height: 0px;
    flex: 0 1;*/
    
    transform: scale(1.0) scaleY(1) translate(0%) translatey(25px);
    -webkit-transform: scale(1.0) scaleY(1) translate(0%) translatey(25px);
    filter: blur(35px);
    opacity: 0.0;
      
    animation: 3s animateTabHide;
    animation-fill-mode: forwards;
    transform-origin: top center;
    -webkit-animation: 3s animateTabHide;
    -webkit-animation-fill-mode: forwards;
    -webkit-transform-origin: top center;
}
.container.flipped {
    animation: 3s animateTab;
    animation-fill-mode: forwards;
    -webkit-animation: 3s animateTab;
    -webkit-animation-fill-mode: forwards;
}
.container.no-animation {
    -webkit-animation: none;
    animation: none;
}

@-webkit-keyframes animateTab {
    0% {
      -webkit-transform: scale(0.6) scaleY(0.5) translate(0%) translatey(-300%);
      filter: blur(35px);
      opacity: 0.0;
    }
    99% {
      -webkit-transform: scale(1.0) scaleY(1) translate(0%) translatey(25px);
      filter: blur(0px);
      opacity: 1;
    }
    100% {
      -webkit-transform: scale(1.0) scaleY(1) translate(0%) translatey(25px);
      filter: blur(0px);
      opacity: 1;
      width: 100%;
      height: 100%;
    }
}
@-webkit-keyframes animateTabHide {
    0% {
      -webkit-transform: scale(1.0) scaleY(1) translate(0%)...

JavaScript

var qsRegex;
$('#remove').click(function() {
	$('.container').removeClass('flipped');
});

$('#more').click(function(){
  var container = $('.container');
  $('.container').removeClass('no-animation');
  $('.container').addClass('flipped');

  container.isotope({
    itemSelector: '.isotope-item',
    transformsEnabled: true,
    hiddenStyle: {
      opacity: 0,
      transform: 'scale(0.001)'
    },
    visibleStyle: {
      opacity: 1
    },
    percentPosition: true,
    transitionDuration: 0, // Laggy when many items.
    resizable: false,
    masonry: {
      columnWidth: '.grid-sizer',
      horizontalOrder: false
    },
    filter: function() {
      //var $this = $('.isotope-item');
      var searchResult = qsRegex ? $(this).text().match(qsRegex) : true;
      return searchResult;
    }
  });


  var elems = $();
  var vineta = '';
  vineta += '<div class="isotope-item">123<img src="http://127.0.0.1/003.jpg" />'
  vineta += '<div class="isotope-item asd"><img src="http://127.0.0.1/005.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/0074158.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/01_-_Cover.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/02_-_Front8f752.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/033017VF_FootWorshipGIF4.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/03ba18b.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/091817VF_StraponGIF1080ap.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/100665.jpg" />'
  vineta += '<div class="isotope-item">123<img src="http://127.0.0.1/100671.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/100672.jpg" />'
  vineta += '<div class="isotope-item"><img src="http://127.0.0.1/100spanks_1469549547000.jpg" />'
  vineta += '<div class="isotope-item"><img...