CODEWITHSUNDEEP
javascriptjquerycssmasonry
user2513846
user2513846

Reputation: 1236

Animation on page load with masonryjs

I cant figure out how to have the initial fadein animation when masonry is initialized at first page load exactly like the original plugin's page:

http://masonry.desandro.com/

Any help suggestions?

Upvotes: 0

Views: 228

Answers (1)

user2513846
user2513846

Reputation: 1236

I used the imagesLoaded progress deferred API and Masonry's appended method.

$('#load-images').click( function() {
  var $items = getItems();
  // hide by default
  $items.hide();
  // append to container
  $container.append( $items );
  $items.imagesLoaded().progress( function( imgLoad, image ) {
    // get item
    // image is imagesLoaded class, not <img>, <img> is image.img
    var $item = $( image.img ).parents('.item');
    // un-hide item
    $item.show();
    // masonry does its thing
    $container.masonry( 'appended', $item );
  });
});

Items are first hidden, then appended to the container. After each item is loaded, it un-hidden then gets revealed by Masonry.

Source: http://codepen.io/desandro/pen/iHevA

Upvotes: 1

Related Questions