Cacher is the code snippet organizer for pro developers

/* GALLERY   ----------------------------------- */
#user-gallery,
#artist-gallery,
#all-gallery {
  perspective: 1000px;
}

/* GALLERY ITEM  ------------------------------- */
.gallery-item {
  //@include clearfix;
  padding: 10px;
  width: calc((100% - (3 * 20px)) / 4); //23.6%;
  height: auto;
  margin-bottom: 20px;
  display: block;
  overflow: hidden;
  background: white;
  border-radius: 3px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);

}

/* gallery item pic */
.gallery-item .gallery-media .gallery-pic {
  width: 100%;
  max-width: 100%;
}

/* gallery item title */
.gallery-item .gallery-details {
  @include clearfix;
}

/* gallery item title */
.gallery-item .gallery-title {
  color: #666;
}

/* gallery item artist name */
.gallery-item .gallery-artist a {
  color: #000;
  font-weight: 700;
}

.gallery-item .gallery-item-actions {
  font-size: 20px;
  a {
    float: left;
    display: block;
  }
}



/* gallery item tools */
.gallery-item .edit-btn-block {
  float: right;
}

/* gallery item tool links */
.gallery-item .edit-btn-block a {
  font-size: 1em !important;
}

.gallery-price {
  font-family: $font1;
  font-weight: 700;
  color: #888;
}

/* Gallery animations */

.gallery-item {
  opacity: 0;
}

.gallery-item.is-visible {
  animation: gallery-items-load-1 500ms ease-in forwards
}

@keyframes gallery-items-load-1 {
  0% {
    opacity: 0;
    height: 0%;
    padding: 0;
    transform: rotateX(90deg);
    transform-origin: 50% 0%;
    margin-top: 100px;
  }

  100% {
    opacity: 1;
  }
}

@keyframes gallery-items-load-2 {
  0% {
    opacity: 0;
    transform: scale(0.3) rotateY(90deg);
  }

  60% {
    transform: scale(1.2)
  }

  90% {
    transform: scale(0.9)
  }

  100% {
    opacity: 1
  }

}


/* heart */

.heart {
  cursor: pointer;

  &.is-liked {
    color: $primary-color;
  }
}

.pulse {
  -webkit-animation: pulse .8s linear;
  -moz-animation: pulse .8s linear;
  -ms-animation: pulse .8s linear;
  animation: pulse .8s linear;
  animation-iteration-count: 2
}

@keyframes pulse
{
0% {
  -webkit-transform: scale(1.4);
  -moz-transform: scale(1.4);
  -o-transform: scale(1.4);
  -ms-transform: scale(1.4);
  transform: scale(1.4)
}

50% {
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  -o-transform: scale(0.8);
  -ms-transform: scale(0.8);
  transform: scale(0.8)
}

100% {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -o-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1)
}

}
@-moz-keyframes pulse {
  0% {
    -moz-transform: scale(1.4);
    transform: scale(1.4)
  }
  50% {
    -moz-transform: scale(0.8);
    transform: scale(0.8)
  }
  100% {
    -moz-transform: scale(1);
    transform: scale(1)
  }
}

@-webkit-keyframes pulse
{
0% {
  -webkit-transform: scale(1.4);
  transform: scale(1.4)
}

50% {
  -webkit-transform: scale(0.8);
  transform: scale(0.8)
}

100% {
  -webkit-transform: scale(1);
  transform: scale(1)
}

}
@-ms-keyframes pulse
{
0% {
  -ms-transform: scale(1.4);
  transform: scale(1.4)
}

50% {
  -ms-transform: scale(0.8);
  transform: scale(0.8)
}

100% {
  -ms-transform: scale(1);
  transform: scale(1)
}

}

/* thumb down */
.dislike {
  cursor: pointer;

  &.is-disliked {
    color: #115eb7 !important;
  }
}

/**
 * Initializes Masonry grid on a container div
 *
 * @param galleryContainer JQuery Object | eg. $('#artwork-gallery')
 * @param galleryItem JQuery String selector | eg '.gallery-item'
 */
function initMasonry(galleryContainer, galleryItem){
    // select gallery
    var $gallery = galleryContainer;
    // Wait for the images to be load completely
    $gallery.imagesLoaded(function () {

        // hide loader
        $('#loading').hide();

        // Activate masonry grid
        $gallery.masonry({
            itemSelector: galleryItem,
            columnWidth: galleryItem,
            gutter: 20
        });
        // time loading of the gallery items
        $(galleryItem).each(function(i){
            // every 0.2s load next image
            setTimeout(function(){
                // set item visible
                $(galleryItem).eq(i).addClass('is-visible');
            }, 200 * i);
        });
    });
}