CODEWITHSUNDEEP
javascriptjqueryhtmlcssjquery-isotope
Tovly Deutsch
Tovly Deutsch

Reputation: 663

Isotope Container Resizing is Jarring

I'm creating a filterable portfolio with the javascript libary Isotope. I've centered the Isotope container in css via auto left and right margins, and via the masonry layout option, isFitWidth, which "sets the width of the container to fit the available number of columns" (from Isotope docs).

CSS

#isotope-list {
margin: 0 auto;
}

Javascript

$container.isotope({
    itemSelector : '.item', 
    layoutMode : 'masonry',
    masonry: {
        isFitWidth: true,
        columnWidth: 60,
        gutter: 10
    },
    transitionDuration: '3s'
});

Unfortunately, when the isotope items are filtered, the container is immediatly resized before the transition is executed. This results in a jarring jump which you can see in this jsfiddle. I've made the transition duration long so you can see the problem more easily.

I've tried adding a transition to the width of the container, transition: width 3s ease;, but that seems very laggy, jittery and jarring as well, even with easing. Here is a jsfiddle with that transition applied.

What can I do to make the container resize non-jarring and not laggy while keeping the container centered?

Upvotes: 1

Views: 1110

Answers (1)

rob.m
rob.m

Reputation: 10571

You should be using .element-sizing and remove columnWidth and Gutter and just apply it with margins in your css. Also apply float:left; to your items.

There you go a working jsfiddle for you.

Centered masonry:

use bootstrap + isotope element-sizing = http://jsfiddle.net/eff841wh/143/

Upvotes: 1

Related Questions