CODEWITHSUNDEEP
jquery
SoCkEt7
SoCkEt7

Reputation: 2277

Masonry animation on load

Hi i want to get an animation when the item are replaced on the mansonry place when page load, but not when page is resized,

heres my code :

  $(function(){
        var blogpost = $('#blogG');

         blogpost.imagesLoaded(function(){
                blogpost.masonry({
                         isAnimated: true,
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false
                        },
                        itemSelector:'.blogposts',
                        isResizable:true

            });
        }); 
});

and my example online : www.mupiz.com/blog/

Thanks!

Upvotes: 0

Views: 5523

Answers (2)

user2633669
user2633669

Reputation: 285

I make onload animation next. 1 add class to my blocks in masonry:
code css:

.box.masonry{
    -webkit-transition-property: left, right, top;
    -moz-transition-property: left, right, top;
    -o-transition-property: left, right, top;
    transition-property: left, right, top;

    -webkit-transition-duration: 0.5s;
    -moz-transition-duration: 0.5s;
    -o-transition-duration: 0.5s;
    transition-duration: 0.5s;
}

And after initialize masonry drop this class from element's be course on browser resize transition works two times.
code js:

$('.box.masonry').parent().bind( 'transitionend', function() {
    $('.box.masonry').removeClass('masonry'); 
});

Upvotes: 0

Rodney G
Rodney G

Reputation: 4826

Set isResizable: false. It's in the Masonry docs.

Upvotes: 1

Related Questions