Animating jQuery Masonry elements one axis at a time

Question

I have a jQuery Masonry layout that I am initialising like so:

$("#container").masonry({
    itemSelector: ".pod, .smallpod",
    animationOptions: {
        queue: true
    }
});

I thought that the queue option would queue the animation so that it animates x first, then y afterwards. Turns out that isn't right.

Does anyone know if this is possible? I've had a look through the Unminified jQuery Masonry JS but I can't find the bit to change.

Library Link: http://masonry.desandro.com/masonry.pkgd.js

I've found the moveTo() and the transitionTo() functions, but I'm not sure what to change.

Within the translate() function there is:

function( x, y ) {
    return 'translate3d(' + x + 'px, ' + y + 'px, 0)';
} :
function( x, y ) {
    return 'translate(' + x + 'px, ' + y + 'px)';
};

But, I can't find a way to just animate it an axis at a time.

score 2 · Accepted Answer · answered Sep 30 '13 at 08:10

2

Turns out you can do this in CSS3 - So, I'm answering my own question..

1) Set transitionDuration to 0

2) Added transition property left, top, opacity

answered Sep 30 '13 at 08:10

Barrie Reader

10,474
11
67
132

I've lost 50rep because I offered a bounty and figured it out myself?! Seriously SO - that's poor... – Barrie Reader Oct 02 '13 at 15:41

Gigamegs · Answer 2 · 2013-10-02T07:36:37.133

0

First off, you can check both axis independently. There's the variable didnotmoved that is equal to both axis. Create a 2nd variable and then make 2 if-statement to increment or decrement the x or y axis.

edited Oct 02 '13 at 07:36

answered Sep 25 '13 at 19:32

Gigamegs

12,342
7
31
71

Simply saying make 1 variable into 2 variables doesn't constitute an answer, especially when in the context of jQuery Masonry (a lot of code). Sorry... In short, this answer wasn't actually helpful. Happy to vote you up if you edit for more detail :/ – Barrie Reader Sep 30 '13 at 08:06

Animating jQuery Masonry elements one axis at a time

2 Answers2