I’m using masonry by Desandro on a wordpress archive page, along with “Ajax Pagination and Infinite Scroll” plugin by Malinky, in order to create a 3 columns masonry layout that appends posts to the masonry grid after more posts are loaded. However, I do not like the visual effect of new set of posts being appended by sliding them in from top/left corner that masonry defaults to. Instead, I would like them to fade in, one by one at the bottom.

I tried setting the transitionDuration to 0s in order to make the new posts start at the right position, but appart from that, I had no success in making them fade in in succession after they are loaded.

So far I only have this to work with:

(function($) {
  $(window).load(function(){
    var $container = $('.grid');
    $container.imagesLoaded( function() {
      $container.masonry({
        itemSelector: '.grid-item',
        transitionDuration: '0s'
      });               
    });
  });   
})( jQuery );

Note: inside the infinite scroll plugin I’m using this callback:

$('.grid').imagesLoaded( function() {
  $('.grid').masonry('reloadItems').masonry();
});

Read more here: Masonry: how to change the default animation to fade in when new items are appended?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: