Animsition jQuery plugin for CSS animated page transitions vs jquery Masonry

Question

I'm building a multi page site, and really love the page transition effect that the plugin Animsition allows. However on a page I used the jquery Masonry plugin. When I first open this page the layout is fine, but when I navigate to other pages of the site and return to the one that's using Masonry the layout is broken. Can anyone help... please

Please provide your code and a jsfiddle. How can we possibly help without knowing anything about your code? — Macsupport, Jul 18 '15 at 13:50
you can see what I mean by following this test link: http://webdpix.com/citycos/funcionamento.html — Sandra Antunes, Jul 18 '15 at 14:28
Actually It is not apparent. What pages are you specifically having issues with? You need to be more specific in your question and description. — Macsupport, Jul 19 '15 at 00:41
When I open http://webdpix.com/citycos/funcionamento.html the layout is fine. When I navigate to other pages, and open again funcionamento.html the layout where I call masonry, becomes broken. — Sandra Antunes, Jul 19 '15 at 23:30

score 1 · Accepted Answer · answered Jul 20 '15 at 05:13

You need to use imagesloaded.js which will make all images load before masonry is called. Load it in your page and then call masonry like this:

 $(function () {
 $('.grid').imagesLoaded( function() {
    $('.grid').masonry({
    itemSelector: '.grid-item',
    columnWidth: 300,
    gutter: 20  
        });
    });
 });

Also, a separate issue, "js/jquery.scrollToTop.min.js" is not loaded.

Animsition jQuery plugin for CSS animated page transitions vs jquery Masonry

1 Answers1