I'm using a basic inline-block based layout with MixItUp.js to provide filtering functionality, along with column-count, and media queries for a fluid/responsive grid. I have set up a jsfiddle here.
My issue is that the grid items seem to bounce around a bit before settling into place when first loaded and after being resorted/filtered. (I've tried to capture this behavior in the above animated gif.) I'm not sure if this is due to the responsive images adapting to the width/height of the grid item and disrupting the animation, or if it's just an issue with my CSS; but I've noticed that if the window size is reduced to a single column (mobile) layout the issue doesn't seem to occur at all, in fact it's quite smooth-- only problematic with two or three columns. I'm seeing this in all browsers I've tested (Chrome, Firefox, Edge.)
I've tried modifying the animation settings in MixItUp.js, but haven't had any luck. I'm suspecting the erratic animation is deriving from the inline-block based layout, but I'm not sure why. Any assistance here is most appreciated.
Edit: I'm seeing the animated GIF isn't running, oh well...
