Isotope not animating on window resize?

If your isotope elements are not animating on window resize i.e. responsive websites, then it’s often a very simple fix – here’s that fix.

If you’re struggling to get your isotope elements to animate and animate on window resize then add the following to your script (.element is your isotope element, so rename accordingly)

$(window).resize(function() {
$('.block').isotope({ sortBy : '' });

So the basic isotope script will look like this:

var $container = $('.element-container');
itemSelector: '.element'
$(window).resize(function() {
$('.element').isotope({ sortBy : '' });

Remember to include the following in your CSS to enable the animations…

.isotope .isotope-item {
/* change duration value to whatever you like */
-webkit-transition-duration: .8s;
-moz-transition-duration: .8s;
-ms-transition-duration: .8s;
-o-transition-duration: .8s;
transition-duration: .8s;

.isotope {
-webkit-transition-property: height, width;
-moz-transition-property: height, width;
-ms-transition-property: height, width;
-o-transition-property: height, width;
transition-property: height, width;

.isotope .isotope-item {
-webkit-transition-property: -webkit-transform, opacity;
-moz-transition-property: -moz-transform, opacity;
-ms-transition-property: -ms-transform, opacity;
-o-transition-property: -o-transform, opacity;
transition-property: transform, opacity;
}, .isotope-item,
.isotope {
-webkit-transition-duration: 0;
-moz-transition-duration: 0;
-ms-transition-duration: 0;
-o-transition-duration: 0;
transition-duration: 0;

.isotope-item {
z-index: 2;

.isotope-hidden.isotope-item {
pointer-events: none;
z-index: 1;

Leave a Reply

Your email address will not be published. Required fields are marked *