I tried to find a javascript library to animate elements like in the way done here. Please have a look past the intro and then apply some filters from the top menu and also try to resize the browser window.

I didn't find anything that acplishes fluid layouts like this one. Does the kind of animation used there have a name? Do you know how it could have been coded?

I tried to find a javascript library to animate elements like in the way done here. Please have a look past the intro and then apply some filters from the top menu and also try to resize the browser window.

I didn't find anything that acplishes fluid layouts like this one. Does the kind of animation used there have a name? Do you know how it could have been coded?

• javascript
• jquery

Share Improve this question Follow edited Aug 12, 2012 at 19:14 Systembolaget 2,51422 gold badges2222 silver badges3737 bronze badges asked Aug 9, 2012 at 21:03 fliimfliim 2,21944 gold badges1919 silver badges3131 bronze badges 4

• 2 There's only one JavaScript file included on that page, and it has a list of all the libraries that are included: mountaindew./js/main.js – JJJ Commented Aug 9, 2012 at 21:07
• I know, but did it exists any library to do the blocks animation when you apply the filter ? – fliim Commented Aug 9, 2012 at 21:27
• 2 could you try to be a little bit more vague as to what you are talking about? – dqhendricks Commented Aug 9, 2012 at 21:30
• Yes, I just edit my post. sorry. It is better ? – fliim Commented Aug 9, 2012 at 21:34

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 13

I was the lead dev on the Mountain Dew site. I coded the whole filtering and grid logic from scratch but Isotope is a very good generic library that acplishes what you want. I didn't used it because I had many specific needs (main reason was because I had to split the grid after clicking on an item). Below is a simplified explanation of how the grid on the Mountain Dew site works and how the sorting is done.

If all items have the same size the logic is pretty straightforward, you just need to count how many items you can fit on a single line and position them accordingly.

var nCols = Math.floor( lineSize / itemWidth );

If the items have a different size you might need some packing algorithm but for this case since I know the possible sizes and they all fit the same grid (1x1, 1x2, 2x2, 3x2), and they have random spacing between them (without overlaps), and we also have some very specific rules about the products and promotions placement I had to code my own algorithm. A simplified explanation of what I do (roughly a bin packing first-fit algorithm):

1. get the browser window dimensions.
2. check how many columns we can have.
3. get a random item from the array.
4. insert it into the next available bin on the current row.
5. if it can't fit the current row we create new rows until we have enough bins to fit the item.
6. repeat steps 3 till 5 as many times as necessary.

Some notes about the Mountain Dew grid:

• bottles can't be inserted adjacent to each other.
• if a bucket is flagged as takeover it should be at the top of the grid.
• filtered out items should go to the bottom of the grid.
• after any filter is applied takeover and bottles might be placed anywhere on the grid.
• if it is the last line of the grid and we don't have more items, bottles can be adjacent to each other (avoid creating unnecessary rows).
• bottles should be evenly spread across the grid but on a pseudo-random position.
• the amount of bottles on the grid is related to the amount of items on the grid (roughly 1 at each 12 items).
• items should be randomly spaced and should avoid overlapping if possible (that made it way harder than if the items was positioned like a regular grid).

The sorting is done with a stable sort - Array#sort isn't stable on v8, so I implemented a merge sort which is stable. Just need to loop through all the items on the array and do the following:

//native array sort isn't stable on chrome so we use amd-utils instead
grid.items = sort(grid.items, function(item, next){
    // move inactive items to the end of list
    // if return zero it keeps items at the same relative position
    if (next.active) {
        return (item.active)? 0 : 1;
    } else {
        return (item.active)? 0 : -1;
    }
});

After we decide how the items should be ordered it is just a matter of finding the proper location of the item and setting the element.style.top and element.style.left:

// positioning can be calculated based on item index if all items have
// same size. not same logic used on mdew since on mdew we have a
// random gutter between items and they shouldn't overlap each other
var colIndex = itemIndex % (nCols - 1);
var rowIndex = Math.floor(itemIndex / nCols);
var destX = colIndex * colWidth;
var destY = rowIndex * rowHeight;

If the browser supports CSS transitions and all items have the same delay/duration we could set the animation on the stylesheet:

.grid-item {
    -webkit-transition: all 500ms ease;
       -moz-transition: all 500ms ease;
            transition: all 500ms ease;
}

But on the Mountain Dew site since we need a random delay and duration for each item (since it looks better), I set the transition using JavaScript:

function randomizeSpeed(){
    var delayProp = vendorPrefix.style('transitionDelay');
    var durationProp = vendorPrefix.style('transitionDuration');
    $('.grid-item').each(function(i, el){
        var duration = rand(SLOWEST_TRANSITION, FASTEST_TRANSITION);
        var delay = map(duration, FASTEST_TRANSITION, SLOWEST_TRANSITION, MIN_DELAY, MAX_DELAY);
        if (delayProp) {
            el.style[delayProp] = delay +'s';
            el.style[durationProp] = duration +'s';
        } else {
            // store delay/duration for JS fallback
            $(el).data({ delay: delay, duration: duration });
        }
    });
}

On the code above I use the methods math/map and random/rand from amd-utils. I also have some code that I use to grab the vendor prefixed style property (mozTransitionDelay, webkitTransitionDelay, transitionDelay) based on feature detection. If the browser doesn't support CSS transitions I fallback to some JavaScript to do the animation:

if (USE_TRANSFORM && USE_TRANSITION) {
    el.css({translateY: destY, translateX: destX});
} else if (USE_TRANSITION) {
    el.css({top: destY, left: destX});
} else {
    TweenLite.to(el, el.data('duration'), {
        css : { top : destY, left: destX },
        delay : el.data('delay'),
        ease : Expo.easeOut
    });
}

I removed the transition animation on IE 7-8 because of performance, the grid elements are too plex and we have too many items.

Nope, to have an automatic layout function on browser resize that also works on touch-devices, you use this plugin here. Then, that MTN stuff is a piece of cake to do. This plugin can just animate, randomise and do shizzle, but you can also order, sort and filter with it.

Nope, the mt. dew code is better. Isotope will leave holes in the middle of your grid. Especially if your cells are put together randomly like mt. dew.