disable css/javascript animation (transform: translate3d)

Question

When my grid of post loads, the posts load at position zero. Then translate3d/width grab their values and they go to right place: http://www.marianoshoes.com/the-journal/

How can I disable this weird javascript/css animation, using css?

Thanks!

Answer 1

Seems to me that it doesn't do any animation but that the sequence is just off, like the CSS is added after the items are already drawn on screen.

If you're adding the CSS classes to the elements using JS you could fix this by defaulting the display property to none, and at last change it to block (This will make it take a little longer for it to display the information, but at least it's in the correct format.

Else you can change this by making sure your CSS is going to be one of the first things to get loaded into the page, and make sure your JS is getting run only after the document is fully loaded.

Answer 2

You can't stop the js from moving the blocks into their right place, but you can fade in the element after your js.

Your css:

.post-grid {
  opacity: 0;
  transition: opacity 0.5s;
}
.post-grid.loaded {
  opacity: 1;
}

Your js:

$(document).ready(function() {
   var $postGrid = $('.post-grid');
   .... do stuff to post grid

   $postGrid.addClass('loaded')
});