<titledata-rh="true">Configuring Shuffle | Shuffle.js</title><metadata-rh="true"name="viewport"content="width=device-width,initial-scale=1"><metadata-rh="true"name="twitter:card"content="summary_large_image"><metadata-rh="true"property="og:image"content="https://vestride.github.io/Shuffle/img/shuffle-open-graph.png"><metadata-rh="true"name="twitter:image"content="https://vestride.github.io/Shuffle/img/shuffle-open-graph.png"><metadata-rh="true"property="og:url"content="https://vestride.github.io/Shuffle/docs/configuration"><metadata-rh="true"property="og:locale"content="en"><metadata-rh="true"name="docusaurus_locale"content="en"><metadata-rh="true"name="docsearch:language"content="en"><metadata-rh="true"name="docusaurus_version"content="current"><metadata-rh="true"name="docusaurus_tag"content="docs-default-current"><metadata-rh="true"name="docsearch:version"content="current"><metadata-rh="true"name="docsearch:docusaurus_tag"content="docs-default-current"><metadata-rh="true"property="og:title"content="Configuring Shuffle | Shuffle.js"><metadata-rh="true"name="description"content="Here are the options you can change, as well as their defaults. The Shuffle.options property contains all the defaults."><metadata-rh="true"property="og:description"content="Here are the options you can change, as well as their defaults. The Shuffle.options property contains all the defaults."><linkdata-rh="true"rel="icon"href="/Shuffle/img/favicon.png"><linkdata-rh="true"rel="canonical"href="https://vestride.github.io/Shuffle/docs/configuration"><linkdata-rh="true"rel="alternate"href="https://vestride.github.io/Shuffle/docs/configuration"hreflang="en"><linkdata-rh="true"rel="alternate"href="https://vestride.github.io/Shuffle/docs/configuration"hreflang="x-default"><linkrel="preconnect"href="https://www.google-analytics.com">
<script>!function(){functiont(t){document.documentElement.setAttribute("data-theme",t)}vare=function(){try{returnnewURLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{returnlocalStorage.getItem("theme")}catch(t){}}();null!==e?t(e):window.matchMedia("(prefers-color-scheme: dark)").matches?t("dark"):(window.matchMedia("(prefers-color-scheme: light)").matches,t("light"))}(),function(){try{constc=newURLSearchParams(window.location.search).entries();for(var[t,e]ofc)if(t.startsWith("docusaurus-data-")){vara=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><divid="__docusaurus"><divrole="region"aria-label="Skip to main content"><aclass="skipToContent_G6ar"href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><navaria-label="Main"class="navbar navbar--fixed-top"><divclass="navbar__inner"><divclass="navbar__items"><buttonaria-label="Toggle navigation bar"aria-expanded="false"class="navbar__toggle clean-btn"type="button"><svgwidth="30"height="30"viewBox="0 0 30 30"aria-hidden="true"><pathstroke="currentColor"stroke-linecap="round"stroke-miterlimit="10"stroke-width="2"d="M4 7h22M4 15h22M4 23h22"></path></svg></button><aclass="navbar__brand"href="/Shuffle/"><divclass="navbar__logo"><imgsrc="/Shuffle/img/favicon.svg"alt="Shuffle.js Logo"class="themedComponent_DHUr themedComponent--light_DIHH"height="24"width="24"><imgsrc="/Shuffle/img/favicon.svg"alt="Shuffle.js Logo"class="themedComponent_DHUr themedComponent--dark_Bv2M"height="24"width="24"></div><bclass="navbar__title text--truncate">Shuffle.js</b></a><aaria-current="page"class="navbar__item navbar__link navbar__link--active"href="/Shuffle/docs/install">Docs</a></div><divclass="navbar__items navbar__items--right"><ahref="https://www.buymeacoffee.com/glen.cheney"target="_blank"rel="noopener noreferrer"class="navbar__item navbar__link">Buy me a coffee<svgwidth="13.5"height="13.5"aria-hidden="true"viewBox="0 0 24 24"class="iconExternalLink_awgD"><pathfill="currentColor"d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><ahref="https://github.com/Vestride/Shuffle"target="_blank"rel="noopener noreferrer"class="navbar__item navbar__link">GitHub<svgwidth="13.5"height="13.5"aria-hidden="true"viewBox="0 0 24 24"class="iconExternalLink_awgD"><pathfill="currentColor"d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></a><divclass="toggle_OLSw colorModeToggle_Hg9V"><buttonclass="clean-btn toggleButton_wYmb toggleButtonDisabled_vaDU"type="button"disabled=""title="Switch between dark and light mode (currently light mode)"aria-label="Switch between dark and light mode (currently light mode)"aria-live="polite"><svgviewBox="0 0 24 24"width="24"height="24"class="lightToggleIcon_Sxwe"><pathfill="currentColor"d="M12,9c1.65,0,3,1.35,3,3s-1.35,3-3,3s-3-1.35-3-3S10.35,9,12,9 M12,7c-2.76,0-5,2.24-5,5s2.24,5,5,5s5-2.24,5-5 S14.76,7,12,7L12,7z M2,13l2,0c0.55,0,1-0.45,1-1s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S1.45,13,2,13z M20,13l2,0c0.55,0,1-0.45,1-1 s-0.45-1-1-1l-2,0c-0.55,0-1,0.45-1,1S19.45,13,20,13z M11,2v2c0,0.55,0.45,1,1,1s1-0.45,1-1V2c0-0.55-0.45-1-1-1S11,1.45,11,2z M11,20v2c0,0.55,0.45,1,1,1s1-0.45,1-1v-2c0-0.55-0.45-1-1-1C11.45,19,11,19.45,11,20z M5.99,4.58c-0.39-0.39-1.03-0.39-1.41,0 c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0s0.39-1.03,0-1.41L5.99,4.58z M18.36,16.95 c-0.39-0.39-1.03-0.39-1.41,0c-0.39,0.39-0.39,1.03,0,1.41l1.06,1.06c0.39,0.39,1.03,0.39,1.41,0c0.39-0.39,0.39-1.03,0-1.41 L18.36,16.95z M19.42,5.99c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06c-0.39,0.39-0.39,1.03,0,1.41 s1.03,0.39,1.41,0L19.42,5.99z M7.05,18.36c0.39-0.39,0.39-1.03,0-1.41c-0.39-0.39-1.03-0.39-1.41,0l-1.06,1.06 c-0.39,0.39-0.39,1.03,0,1.41s1.03,0.39,1.41,0L7.05,18.36z"></path></svg><svgviewBox="0 0 24 24"width="24"height="
<p>Here are the options you can change, as well as their defaults. The <code>Shuffle.options</code> property contains all the defaults.</p>
<p>No options <em>need</em> to be specified, but <code>itemSelector</code> should be used. Other common options to change are <code>speed</code> and <code>sizer</code>.</p>
<h2class="anchor anchorWithStickyNavbar_fF9Z"id="options">Options<ahref="#options"class="hash-link"aria-label="Direct link to Options"title="Direct link to Options"></a></h2>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="buffer-number"><code>buffer</code> [number]<ahref="#buffer-number"class="hash-link"aria-label="Direct link to buffer-number"title="Direct link to buffer-number"></a></h3>
<p>Default: <code>0</code></p>
<p>Useful for percentage based heights when they might not always be exactly the same (in pixels).</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="columnthreshold-number"><code>columnThreshold</code> [number]<ahref="#columnthreshold-number"class="hash-link"aria-label="Direct link to columnthreshold-number"title="Direct link to columnthreshold-number"></a></h3>
<p>Default: <code>0.01</code></p>
<p>Reading the width of elements isn't precise enough and can cause columns to jump between values.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="columnwidth-number--containerwidth-number--number"><code>columnWidth</code> [number | (containerWidth: number) => number]<ahref="#columnwidth-number--containerwidth-number--number"class="hash-link"aria-label="Direct link to columnwidth-number--containerwidth-number--number"title="Direct link to columnwidth-number--containerwidth-number--number"></a></h3>
<p>Default: <code>0</code></p>
<p>A static number or function that returns a number which determines how wide the columns are (in pixels).</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="delimiter-string--null"><code>delimiter</code> [string | null]<ahref="#delimiter-string--null"class="hash-link"aria-label="Direct link to delimiter-string--null"title="Direct link to delimiter-string--null"></a></h3>
<p>Default: <code>null</code></p>
<p>Set a delimiter to parse the <code>data-groups</code> attribute with using <code>String.prototype.split()</code>, instead of using <code>JSON.parse()</code>. For example, if your HTML was <code>data-groups="nature,city"</code>, you could set <code>delimiter: ','</code>.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="easing-string"><code>easing</code> [string]<ahref="#easing-string"class="hash-link"aria-label="Direct link to easing-string"title="Direct link to easing-string"></a></h3>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="filtermode-shufflefiltermode"><code>filterMode</code> [Shuffle.FilterMode]<ahref="#filtermode-shufflefiltermode"class="hash-link"aria-label="Direct link to filtermode-shufflefiltermode"title="Direct link to filtermode-shufflefiltermode"></a></h3>
<p>Affects using an array with filter. e.g. <code>filter(['one', 'two'])</code>. With "any", the element passes the test if any of its groups are in the array. With "all", the element only passes if all groups are in the array.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="group-string"><code>group</code> [string]<ahref="#group-string"class="hash-link"aria-label="Direct link to group-string"title="Direct link to group-string"></a></h3>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="gutterwidth-number--containerwidth-number--number"><code>gutterWidth</code> [number | (containerWidth: number) => number]<ahref="#gutterwidth-number--containerwidth-number--number"class="hash-link"aria-label="Direct link to gutterwidth-number--containerwidth-number--number"title="Direct link to gutterwidth-number--containerwidth-number--number"></a></h3>
<p>Default: <code>0</code></p>
<p>A static number or function that determines how wide the gutters between columns are (in pixels).</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="initialsort-sortoptions--null"><code>initialSort</code> [SortOptions | null]<ahref="#initialsort-sortoptions--null"class="hash-link"aria-label="Direct link to initialsort-sortoptions--null"title="Direct link to initialsort-sortoptions--null"></a></h3>
<p>Default: <code>null</code></p>
<p>Shuffle can be initialized with a sort object. It is the same object given to the sort method.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="iscentered-boolean"><code>isCentered</code> [boolean]<ahref="#iscentered-boolean"class="hash-link"aria-label="Direct link to iscentered-boolean"title="Direct link to iscentered-boolean"></a></h3>
<p>Default: <code>false</code></p>
<p>Whether to center grid items in the row with the leftover space.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="isrtl-boolean"><code>isRTL</code> [boolean]<ahref="#isrtl-boolean"class="hash-link"aria-label="Direct link to isrtl-boolean"title="Direct link to isrtl-boolean"></a></h3>
<p>Default: <code>false</code></p>
<p>Whether to align grid items to the right in the row.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="itemselector-string"><code>itemSelector</code> [string]<ahref="#itemselector-string"class="hash-link"aria-label="Direct link to itemselector-string"title="Direct link to itemselector-string"></a></h3>
<p>Default: <code>'*'</code></p>
<p>Query selector to find Shuffle items. e.g. '.picture-item'.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="roundtransforms-boolean"><code>roundTransforms</code> [boolean]<ahref="#roundtransforms-boolean"class="hash-link"aria-label="Direct link to roundtransforms-boolean"title="Direct link to roundtransforms-boolean"></a></h3>
<p>Default: <code>true</code></p>
<p>Whether to round pixel values used in translate(x, y). This usually avoids blurriness.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="sizer-htmlelement--string--null"><code>sizer</code> [HTMLElement | string | null]<ahref="#sizer-htmlelement--string--null"class="hash-link"aria-label="Direct link to sizer-htmlelement--string--null"title="Direct link to sizer-htmlelement--string--null"></a></h3>
<p>Default: <code>null</code></p>
<p>Element or selector string. Use an element to determine the size of columns and gutters.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="speed-number"><code>speed</code> [number]<ahref="#speed-number"class="hash-link"aria-label="Direct link to speed-number"title="Direct link to speed-number"></a></h3>
<p>Default: <code>250</code></p>
<p>Transition/animation speed (milliseconds).</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="staggeramount-number"><code>staggerAmount</code> [number]<ahref="#staggeramount-number"class="hash-link"aria-label="Direct link to staggeramount-number"title="Direct link to staggeramount-number"></a></h3>
<p>Default: <code>15</code></p>
<p>Transition delay offset for each item in milliseconds.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="staggeramountmax-number"><code>staggerAmountMax</code> [number]<ahref="#staggeramountmax-number"class="hash-link"aria-label="Direct link to staggeramountmax-number"title="Direct link to staggeramountmax-number"></a></h3>
<p>Default: <code>150</code></p>
<p>Maximum stagger delay in milliseconds. This caps the stagger amount so that it does not exceed the given value. Since the transition delay is incremented for each item in the grid, this is useful for large grids of items.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="usetransforms-boolean"><code>useTransforms</code> [boolean]<ahref="#usetransforms-boolean"class="hash-link"aria-label="Direct link to usetransforms-boolean"title="Direct link to usetransforms-boolean"></a></h3>
<p>Default: <code>false</code></p>
<p>Whether to use absolute positioning instead of transforms.</p>
<h2class="anchor anchorWithStickyNavbar_fF9Z"id="sorting-object">Sorting object<ahref="#sorting-object"class="hash-link"aria-label="Direct link to Sorting object"title="Direct link to Sorting object"></a></h2>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="by-element-htmlelement--any"><code>by</code> [(element: HTMLElement) => any]<ahref="#by-element-htmlelement--any"class="hash-link"aria-label="Direct link to by-element-htmlelement--any"title="Direct link to by-element-htmlelement--any"></a></h3>
<p>Default: <code>null</code></p>
<p>Sorting function which gives you the element each shuffle item is using by default.</p>
<p>Returning <code>undefined</code> from the <code>by</code> function will reset the order to DOM order.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"><code>compare</code> [(a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number]<ahref="#compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"class="hash-link"aria-label="Direct link to compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"title="Direct link to compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"></a></h3>
<p>Default: <code>null</code></p>
<p>Instead of using the simple <code>by</code> function, you can use the <code>compare</code> function provide a completely custom sorting function.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="key-keyof-shuffleshuffleitem"><code>key</code> [keyof Shuffle.ShuffleItem]<ahref="#key-keyof-shuffleshuffleitem"class="hash-link"aria-label="Direct link to key-keyof-shuffleshuffleitem"title="Direct link to key-keyof-shuffleshuffleitem"></a></h3>
<p>Default: <code>'element'</code></p>
<p>Determines which property of the <code>ShuffleItem</code> instance is passed to the <code>by</code> function.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="randomize-boolean"><code>randomize</code> [boolean]<ahref="#randomize-boolean"class="hash-link"aria-label="Direct link to randomize-boolean"title="Direct link to randomize-boolean"></a></h3>
<p>Default: <code>false</code></p>
<p>If true, this will skip the sorting and return a randomized order in the array.</p>
<h3class="anchor anchorWithStickyNavbar_fF9Z"id="reverse-boolean"><code>reverse</code> [boolean]<ahref="#reverse-boolean"class="hash-link"aria-label="Direct link to reverse-boolean"title="Direct link to reverse-boolean"></a></h3>