Inflate JS

The Markup

For markup we'll have <ul> with class "tile-wrapper" which contains <li> with class "tile" styled as square tile. You could as well use <div> here which would need different markup.

<ul class="tile-wrapper">
    <li class="tile">
        ...
    </li>
    ...
</ul>

Let's style all this.

The CSS

We'll start with grid which will contain 4 columns. Lets center it and and set width 960px since we'll be creating tiles each of width 240px. To make this grid responsive we'll take care of smaller screen sizes in our media queries later on:

.tile-wrapper{
    list-style: none;
    margin: 0 auto;
    width: 960px;
}

The tiles should float left and we'll give them width of 240px and height of 240px. In order to make inflating tiles work we have to set its transform-origin to 0px:

.tile{
    float: left;
    height:240px;
    transform-origin: 0px 0px;
    width:240px;
}

That's all the style! Let's move over to the Javascript.

The Javascript

Here's where we make stuff happen. As all HTML and CSS is in place, all we have to do is call inflate function to start inflating tiles effect.

$(".tile-wrapper").inflate({
    elements: ".tile",
    easing: Back.easeOut,
    scale: 40
});

Lets go over what these vars do.

elements	selector for tile
easing	timing function for inflation effect
scale	scale amout for tile