Round translate values by default.

dist/shuffle.js

@@ -1603,6 +1603,9 @@ var Shuffle = function (_TinyEmitter) {
       var styles = Object.assign({}, styleObject);
 
       if (this.options.useTransforms) {
+        if (this.options.roundTransforms) {
+          item.point = new Point(Math.round(item.point.x), Math.round(item.point.y));
+        }
         styles.transform = 'translate(' + item.point.x + 'px, ' + item.point.y + 'px) scale(' + item.scale + ')';
       } else {
         styles.left = item.point.x + 'px';
@@ -2220,7 +2223,11 @@ Shuffle.options = {
   filterMode: Shuffle.FilterMode.ANY,
 
   // Attempt to center grid items in each row.
-  isCentered: false
+  isCentered: false,
+
+  // Whether to round pixel values used in translate(x, y). This usually avoids
+  // blurriness.
+  roundTransforms: true
 };
 
 Shuffle.Point = Point;

docs/_includes/changelog.html

@@ -1,6 +1,7 @@
 <h2>Changelog<a href="#changelog"></a></h2>
 <p>For a more detailed changelog, visit <a href="https://github.com/Vestride/Shuffle/releases">the latest releases</a> on GitHub.</p>
 <ul>
+  <li><code>v5.0.1</code> 7/18/17 - Add <code>roundTransforms</code> option.</li>
   <li><code>v5.0.0</code> 7/18/17 - Change global export from <code>shuffle</code> to <code>Shuffle</code>. Remove bower support. Expect ES6 environment. Make Shuffle instances Event Emitters instead of dispatching <code>CustomEvent</code>.</li>
   <li><code>v4.2.0</code> 5/10/17 - Replace <code>webpack</code> build with <code>rollup</code>. Replace <code>jshint</code> and <code>jscs</code> with <code>eslint</code>. Add <code>filterMode</code> option.</li>
   <li><code>v4.1.1</code> 3/21/17 - the <code>before</code> styles for a <code>ShuffleItem</code> were not applied if the item didn&rsquo;t move.</li>

docs/_includes/options.html

@@ -15,12 +15,13 @@ Shuffle.options = {
   initialSort: null, // Shuffle can be initialized with a sort object. It is the same object given to the sort method.
   isCentered: false, // Attempt to center grid items in each row.
   itemSelector: '*', // e.g. '.picture-item'.
-  throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
-  throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
+  roundTransforms: true, // Whether to round pixel values used in translate(x, y). This usually avoids blurriness.
   sizer: null, // Element or selector string. Use an element to determine the size of columns and gutters.
   speed: 250, // Transition/animation speed (milliseconds).
   staggerAmount: 15, // Transition delay offset for each item in milliseconds.
   staggerAmountMax: 150, // Maximum stagger delay in milliseconds.
+  throttle: throttle, // By default, shuffle will throttle resize events. This can be changed or removed.
+  throttleTime: 300, // How often shuffle can be called on resize (in milliseconds).
   useTransforms: true, // Whether to use transforms or absolute positioning.
 };</code></pre>
 </div>

docs/dist/shuffle.js

@@ -1603,6 +1603,9 @@ var Shuffle = function (_TinyEmitter) {
       var styles = Object.assign({}, styleObject);
 
       if (this.options.useTransforms) {
+        if (this.options.roundTransforms) {
+          item.point = new Point(Math.round(item.point.x), Math.round(item.point.y));
+        }
         styles.transform = 'translate(' + item.point.x + 'px, ' + item.point.y + 'px) scale(' + item.scale + ')';
       } else {
         styles.left = item.point.x + 'px';
@@ -2220,7 +2223,11 @@ Shuffle.options = {
   filterMode: Shuffle.FilterMode.ANY,
 
   // Attempt to center grid items in each row.
-  isCentered: false
+  isCentered: false,
+
+  // Whether to round pixel values used in translate(x, y). This usually avoids
+  // blurriness.
+  roundTransforms: true
 };
 
 Shuffle.Point = Point;

index.d.ts

@@ -301,6 +301,11 @@ declare namespace Shuffle {
      */
     itemSelector?: string;
 
+    /**
+     * Whether to round pixel values used in translate(x, y). This usually avoids blurriness.
+     */
+    roundTransforms?: boolean,
+
     /**
      * Element or selector string. Use an element to determine the size of columns and gutters.
      */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "shufflejs",
-  "version": "5.0.0",
+  "version": "5.0.1",
   "description": "Categorize, sort, and filter a responsive grid of items",
   "keywords": [
     "gallery",

src/shuffle.js

@@ -649,6 +649,9 @@ class Shuffle extends TinyEmitter {
     const styles = Object.assign({}, styleObject);
 
     if (this.options.useTransforms) {
+      if (this.options.roundTransforms) {
+        item.point = new Point(Math.round(item.point.x), Math.round(item.point.y));
+      }
       styles.transform = `translate(${item.point.x}px, ${item.point.y}px) scale(${item.scale})`;
     } else {
       styles.left = item.point.x + 'px';
@@ -1179,6 +1182,10 @@ Shuffle.options = {
 
   // Attempt to center grid items in each row.
   isCentered: false,
+
+  // Whether to round pixel values used in translate(x, y). This usually avoids
+  // blurriness.
+  roundTransforms: true,
 };
 
 Shuffle.Point = Point;