CODEWITHSUNDEEP
jquerywordpressmasonry
Goran Tesic
Goran Tesic

Reputation: 739

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

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();
});

Upvotes: 1

Views: 3081

Answers (1)

Goran Tesic
Goran Tesic

Reputation: 739

Ok, so I figured it out, if enyone else runs into this problem. You need to set the transitionDuration to '0s' for both the initial masonry function and the ajax plugin callback function.

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

})( jQuery );

for ajax callback

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

Then set the initial opacity of .grid-item elements to 0 inside your css file, and then set each element to fade to 1 via jQuery, like this

jQuery(document).ready(function( $ ) {
    $('.grid-item').each(function(fadeInDiv){
        $(this).delay(fadeInDiv * 50).fadeTo(250, 1);
   });
});

as well as for ajax callback

$('.grid-item').each(function(fadeInDiv){
    $(this).delay(fadeInDiv * 50).fadeTo(250, 1);
});`

Upvotes: 4

Related Questions