Renderers

Coords changers

What are coords changers in Gridifier?

Coords changers are functions, that are called on render step to animate item position changes.

What coords changers are available?

• default - changes left and top style properties without animations.
• position - changes left and top style properties with CSS3 transitions.
• translate - uses CSS3 translate transform to change item position.
• translateInt - uses CSS3 translate transform to change item position with values rounding.
• translate3d - uses CSS3 translate3d transform to change item position.
• translate3dInt - uses CSS3 translate3d transform to change item position with values rounding.

What is default used coords changer?

By default, Gridifier is using translate3dInt coords changer. It is used because of following reasons:

• position looks a little slow and 'chunky' on touch devices.
• translate/translateInt also has a problems with performance on touch devices.
• translate3d has satisfactory performance on touch devices, althrough it creates 'blurry' texts problem - GPU is transforming texts from vectors to textures to provide hardware acceleration in most browsers.
• translate3dInt has satisfactory performance on touch devices, as well solves problem with 'blurry' texts. So, this coords changer was the best choice to use as default.

How to select coords changer?

How to control coords change duration/transition timing?

Renderer antialiasing

What is renderer antialiasing?

Renderer antialiasing functions controls item offsets from their calculated positions on render step.

When this functions are required?

1. Grid items are placed close to each other.(without margins)
2. Grid items have percentage widths(vertical grids), percentage heights(horizontal grids) or percentage widths/percentage padding bottoms(vertical grids).

Why this functions are required?

• Small 1px 'gaps' can appear inside grid between not px based items.
• It happens because of calculation errors, that happens only on specific viewport widths/heights.
• In such cases you can use antialiasing functions to offset item position by little value to remove this annoying gaps.

How this functions are working?

• This functions are offseting render in such way, that items are placed a little closer to each other.
• This offset will be used only between grid item pairs.(not space around grid)
• So, for example, antialiasing width by 1px doesn't mean that first grid item will be renderered with x coord = -1px.(With vertical grid/default append)
• That means, that setting 1px width antialias will render next item starting from last pixel of previous item.

Empty space in grid end

• If vertical grid 'row' will contain 4 25% width items and 0.1% width antialias, grid end will contain 0.4% of empty space. To fix it, you can add antialias value to each item width -> width = 25.1%.
• Alternatively, if you are using percentage height with horizontal grids, you can add antialias value to item height.(height = 25.1%)

Antialiasing functions:

Antialias initial settings:

var grid = new Gridifier(demoGrid);
/* Set some small(0.1 - 0.2) antialias to remove 1px gaps */
grid.set("widthPtAs", 0.1);

/* CSS */
.gridItem {
    /* Add antialias value to width to exclude empty space from
       the end of the grid */
    width: 25.1%;
}
        

var grid = new Gridifier(demoGrid, {grid: "horizontal"});
/* Set some small(0.1 - 0.2) antialias to remove 1px gaps */
grid.set("heightPtAs", 0.1);

/* CSS */
.gridItem {
    /* Add antialias value to height to exclude empty space from
    the top or the bottom of the grid */
    height: 25.1%;
}
        

var grid = new Gridifier(demoGrid);
grid.set("widthPtAs", 0.1);
/* 1px height offset is required here, because with percentage padding bottom
     1px gap appears between 'rows' on some viewport widths in Firefox. */
grid.set("heightPxAs", 1);

/* CSS */
.gridItem {
    width: 12.1%;
    padding-bottom: 12%;
}

.gridItemBig {
    /* If you are using height px antialias and are using big items,
       don't forget to substract antialias value from big item. (Value
       depends on itemsCount, that are 'covering' big item) */
    width: 25.1%;
    padding-bottom: 25%;
    padding-bottom: calc(25% - 1px);
}