Animate initial reposition

[emilecantin]

I'm using Masonry, but I guess this is Outlayer's concern. I'd like the initial layout of Masonry to be animated.

My use-case is that I have some HTML that is initially rendered on the server with a simple flexbox layout, and I re-do the layout on the client side with Masonry. When Masonry kicks in, the elements 'jump' to their computed place, without any transition.

Would it be possible to add a transition on the initial layout?

[desandro]

There's actually an undocumented option layoutInstant. You can set layoutInstant: false to animate initial layout. See demo http://codepen.io/desandro/pen/ZWLNbG/

This option is undocumented because I'm not sure how useful it is. It may be removed in a future version of Outlayer.

[emilecantin]

This might be an improvement, but it transitions all items from (0,0). In my use case, the items are already mostly placed correctly, and I'd like them to animate from that position.

I forked your pen to illustrate the issue: http://codepen.io/anon/pen/ONWYba

[desandro]

Sorry, there's no good way to use browser float positioning and have items animate from that position.

But you can hack an initial animation using appended, revealing items once they're ready. See http://codepen.io/desandro/pen/7ca42c6b0e51387a83d81b248c53429e/