JSFiddle - React, Tailwind, and code Playground

by Laurie

HTML

<script src="//tympanus.net/Development/GridLoadingEffects/js/masonry.pkgd.min.js"></script>
<script src="//tympanus.net/Development/GridLoadingEffects/js/imagesloaded.js"></script>
<script src="//tympanus.net/Development/GridLoadingEffects/js/classie.js"></script>
<script src="//tympanus.net/Development/GridLoadingEffects/js/AnimOnScroll.js"></script>
<ul class="grid effect-3" id="grid"></ul>

CSS

ul li {
  list-style-type:none;
  display:block;
  float:left;
  padding:6px;
}

JavaScript

$.getJSON();
$.ajax({
    url: 'https://openapi.etsy.com/v2/shops/lemonbranch/listings/active.js?includes=MainImage',
    data: {api_key: '9njigunpqge5htjynd9uu52f'},
    dataType: 'jsonp',
    success: function(data){
        console.log(data,'success');
        for(x in data.results){
        	//console.log(data.results[x].title);
            $('ul')
                .append("<li><a href='" + data.results[x].url + "'><img src='" + data.results[x].MainImage.url_170x135 + "'/></a></li>");
        }
    },
    error: function(data){
        console.log(data,'error');        
    }
});

new AnimOnScroll( document.getElementById( 'grid' ), {
				minDuration : 0.4,
				maxDuration : 0.7,
				viewportFactor : 0.2
			} );