Isotope not animating on window resize?

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:

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

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

.isotope,
.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.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
-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;
}

The post Isotope not animating on window resize? appeared first on Dare to Think.