yconst/Freetile — pull request #27 by gavJackson (2014-08-07 09:35:00+00:00)
Title: Added CSS3 transforms support for better mobile performance

CSS3 GPU animations
-------------------

Using CSS3 `translate3d` significantly improves animation performance, especially on mobile devices, you can force CSS3 translations with this new option.

csstransforms3d

If set to true, it means that css3 3D transforms (on the GPU) are available and should be used for all animations over the slower `jquery.animate`.
Default: false

Should be set to the value of a feature detect (e.g. using Modernizr)

$('#container').freetile({
...
selector: '.grid-item',
csstransforms3d: $('html').is('.csstransforms3d')
});

*Gotcha: CSS transforms do not effect document flow so your tile container height will no longer reflect the true height of your grid*

Make sure you are also using CSS3 transitions on each element in your grid to get it to animate:

.grid-item{
webkit-transition: all .25s ease-out;
-moz-transition: all .25s ease-out;
-o-transition: all .25s ease-out;
-ms-transition: all .25s ease-out;
transition: all .25s ease-out;
}