|
|
<div role="region"><a href="#" class="skipToContent_G6ar">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/Shuffle/"><div class="navbar__logo"><img src="/Shuffle/img/favicon.svg" alt="Shuffle.js Logo" class="themedImage_RWGG themedImage--light_riBm" height="24" width="24"><img src="/Shuffle/img/favicon.svg" alt="Shuffle.js Logo" class="themedImage_RWGG themedImage--dark_Dsi0" height="24" width="24"></div><b class="navbar__title text--truncate">Shuffle.js</b></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/Shuffle/docs/install">Docs</a></div><div class="navbar__items navbar__items--right"><a href="https://www.buymeacoffee.com/glen.cheney" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">Buy me a coffee<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_ccw9"><path fill="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><a href="https://github.com/Vestride/Shuffle" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_ccw9"><path fill="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><div class="toggle_OLSw colorModeToggle_Hg9V"><button class="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)"><svg viewBox="0 0 24 24" width="24" height="24" class="lightToggleIcon_Sxwe"><path fill="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><svg viewBox="0 0 24 24" width="24" height="24" class="darkToggleIcon_Yem1"><path fill="currentColor" d="M9.37,5.51C9.19,6.15,9.1,6.82,9.1,7.5c0,4.08,3.32,7.4,7.4,7.4c0.68,0,1.35-0.09,1.99-0.27C17.45,17.19,14.93,19,12,19 c-3.86,0-7-3.14-7-7C5,9.07,6.81,6.55,9.37,5.51z M12,3c-4.97,0-9,4.03-9,9s4.03,9,9,9s9-4.03,9-9c0-0.46-0.04-0.92-0.1-1.36 c-0.98,1.37-2.58,2.26-4.4,2.26c-2.98,0-5.4-2.42-5.4-5.4c0-1.81,0.89-3.42,2.26-4.4C12.92,3.04,12.46,3,12,3L12,3z"></path></svg></button></div><div class="searchBox_xrOJ"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docsWrapper_BqXd"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_z1FD" type="button"></button><div class="docPage_pOTq"><aside class="theme-doc-sidebar-container docSidebarContainer_aIKW"><div class="sidebar_vJCc"><nav class="menu thin-scrollbar menu_qiME"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/install">Installation</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/getting-started">Getting started</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/column-widths">How column widths work</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" href="/Shuffle/docs/configuration">Configuring Shuffle</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/filters">Filters</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/advanced-filters">Advanced filters</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/sorting">Sorting</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/events">Events</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/adding-removing">Adding and removing items</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/api">API</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/custom-styles">Custom styles</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/alternatives">Alternatives</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/supported-browsers">Supported browsers</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/faqs">FAQs</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/changelog">Changelog (abbreviated)</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/Shuffle/docs/demos">List of demos</a></li></ul></nav></div></aside><main class="docMainContainer_fv3b"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_h7Uf"><div class="docItemContainer_yxO3"><article><nav class="theme-doc-breadcrumbs breadcrumbsContainer_zCmv" aria-label="Breadcrumbs"><ul class="breadcrumbs" itemscope="" itemtype="https://schema.org/BreadcrumbList"><li class="breadcrumbs__item"><a aria-label="Home page" class="breadcrumbs__link" href="/Shuffle/"><svg viewBox="0 0 24 24" class="breadcrumbHomeIcon_tMMf"><path d="M10 19v-5h4v5c0 .55.45 1 1 1h3c.55 0 1-.45 1-1v-7h1.7c.46 0 .68-.57.33-.87L12.67 3.6c-.38-.34-.96-.34-1.34 0l-8.36 7.53c-.34.3-.13.87.33.87H5v7c0 .55.45 1 1 1h3c.55 0 1-.45 1-1z" fill="currentColor"></path></svg></a></li><li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem" class="breadcrumbs__item breadcrumbs__item--active"><span class="breadcrumbs__link" itemprop="name">Configuring Shuffle</span><meta itemprop="position" content="1"></li></ul></nav><div class="tocCollapsible_O_Qc theme-doc-toc-mobile tocMobile_AFi3"><button type="button" class="clean-btn tocCollapsibleButton_htYj">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Configuring Shuffle</h1><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><h2 class="anchor anchorWithStickyNavbar_fF9Z" id="options">Options<a class="hash-link" href="#options" title="Direct link to heading"></a></h2><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="buffer-number"><code>buffer</code> <!-- -->[number]<a class="hash-link" href="#buffer-number" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="columnthreshold-number"><code>columnThreshold</code> <!-- -->[number]<a class="hash-link" href="#columnthreshold-number" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="columnwidth-number--conatinerwidth-number--number"><code>columnWidth</code> <!-- -->[number | (conatinerWidth: number) => number]<a class="hash-link" href="#columnwidth-number--conatinerwidth-number--number" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="delimiter-string--null"><code>delimiter</code> <!-- -->[string | null]<a class="hash-link" href="#delimiter-string--null" title="Direct link to heading"></a></h3><p>Default: <code>null</code></p><p>A static number or function that returns a number which determines how wide the columns are (in pixels).</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="easing-string"><code>easing</code> <!-- -->[string]<a class="hash-link" href="#easing-string" title="Direct link to heading"></a></h3><p>Default: <code>'cubic-bezier(0.4, 0.0, 0.2, 1)'</code></p><p>CSS easing function to use.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="filtermode-shufflefiltermode"><code>filterMode</code> <!-- -->[Shuffle.FilterMode]<a class="hash-link" href="#filtermode-shufflefiltermode" title="Direct link to heading"></a></h3><p>Default: <code>Shuffle.FilterMode.ANY</code></p><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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="group-string"><code>group</code> <!-- -->[string]<a class="hash-link" href="#group-string" title="Direct link to heading"></a></h3><p>Default: <code>Shuffle.ALL_ITEMS</code> (<code>"all"</code>)</p><p>Initial filter group.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="gutterwidth-number--conatinerwidth-number--number"><code>gutterWidth</code> <!-- -->[number | (conatinerWidth: number) => number]<a class="hash-link" href="#gutterwidth-number--conatinerwidth-number--number" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="initialsort-sortoptions--null"><code>initialSort</code> <!-- -->[SortOptions | null]<a class="hash-link" href="#initialsort-sortoptions--null" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="iscentered-boolean"><code>isCentered</code> <!-- -->[boolean]<a class="hash-link" href="#iscentered-boolean" title="Direct link to heading"></a></h3><p>Default: <code>false</code></p><p>Whether to center grid items in the row with the leftover space.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="isrtl-boolean"><code>isRTL</code> <!-- -->[boolean]<a class="hash-link" href="#isrtl-boolean" title="Direct link to heading"></a></h3><p>Default: <code>false</code></p><p>Whether to align grid items to the right in the row.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="itemselector-string"><code>itemSelector</code> <!-- -->[string]<a class="hash-link" href="#itemselector-string" title="Direct link to heading"></a></h3><p>Default: <code>'*'</code></p><p>Query selector to find Shuffle items. e.g. '.picture-item'.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="roundtransforms-boolean"><code>roundTransforms</code> <!-- -->[boolean]<a class="hash-link" href="#roundtransforms-boolean" title="Direct link to heading"></a></h3><p>Default: <code>true</code></p><p>Whether to round pixel values used in translate(x, y). This usually avoids blurriness.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="sizer-htmlelement--string--null"><code>sizer</code> <!-- -->[HTMLElement | string | null]<a class="hash-link" href="#sizer-htmlelement--string--null" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="speed-number"><code>speed</code> <!-- -->[number]<a class="hash-link" href="#speed-number" title="Direct link to heading"></a></h3><p>Default: <code>250</code></p><p>Transition/animation speed (milliseconds).</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="staggeramount-number"><code>staggerAmount</code> <!-- -->[number]<a class="hash-link" href="#staggeramount-number" title="Direct link to heading"></a></h3><p>Default: <code>15</code></p><p>Transition delay offset for each item in milliseconds.</p><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="staggeramountmax-number"><code>staggerAmountMax</code> <!-- -->[number]<a class="hash-link" href="#staggeramountmax-number" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="usetransforms-boolean"><code>useTransforms</code> <!-- -->[boolean]<a class="hash-link" href="#usetransforms-boolean" title="Direct link to heading"></a></h3><p>Default: <code>false</code></p><p>Whether to use absolute positioning instead of transforms.</p><h2 class="anchor anchorWithStickyNavbar_fF9Z" id="sorting-object">Sorting object<a class="hash-link" href="#sorting-object" title="Direct link to heading"></a></h2><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="by-element-htmlelement--any"><code>by</code> <!-- -->[(element: HTMLElement) => any]<a class="hash-link" href="#by-element-htmlelement--any" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number"><code>compare</code> <!-- -->[(a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number]<a class="hash-link" href="#compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number" title="Direct link to heading"></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><div class="admonition admonition-tip alert alert--success"><div class="admonition-heading"><h5><span class="admonition-icon"><svg xmlns="http://www.w3.org/2000/svg" width="12" height="16" viewBox="0 0 12 16"><path fill-rule="evenodd" d="M6.5 0C3.48 0 1 2.19 1 5c0 .92.55 2.25 1 3 1.34 2.25 1.78 2.78 2 4v1h5v-1c.22-1.22.66-1.75 2-4 .45-.75 1-2.08 1-3 0-2.81-2.48-5-5.5-5zm3.64 7.48c-.25.44-.47.8-.67 1.11-.86 1.41-1.25 2.06-1.45 3.23-.02.05-.02.11-.02.17H5c0-.06 0-.13-.02-.17-.2-1.17-.59-1.83-1.45-3.23-.2-.31-.42-.67-.67-1.11C2.44 6.78 2 5.65 2 5c0-2.2 2.02-4 4.5-4 1.22 0 2.36.42 3.22 1.19C10.55 2.94 11 3.94 11 5c0 .66-.44 1.78-.86 2.48zM4 14h5c-.23 1.14-1.3 2-2.5 2s-2.27-.86-2.5-2z"></path></svg></span>tip</h5></div><div class="admonition-content"><p>See <a href="/Shuffle/docs/sorting#advanced-sorting">Advanced sorting</a> for usage.</p></div></div><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="key-keyof-shuffleshuffleitem"><code>key</code> <!-- -->[keyof Shuffle.ShuffleItem]<a class="hash-link" href="#key-keyof-shuffleshuffleitem" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="randomize-boolean"><code>randomize</code> <!-- -->[boolean]<a class="hash-link" href="#randomize-boolean" title="Direct link to heading"></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><h3 class="anchor anchorWithStickyNavbar_fF9Z" id="reverse-boolean"><code>reverse</code> <!-- -->[boolean]<a class="hash-link" href="#reverse-boolean" title="Direct link to heading"></a></h3><p>Default: <code>false</code></p><p>Use array.reverse() to reverse the results of your sort.</p></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/Vestride/Shuffle/tree/main/apps/website/docs/docs/configuration.md" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_taBP" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_w6xA"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><a class="pagination-nav__link pagination-nav__link--prev" href="/Shuffle/docs/column-widths"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">How column widths work</div></a><a class="pagination-nav__link pagination-nav__link--next" href="/Shuffle/docs/filters"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">Filters</div></a></nav></div></div><div class="col col--3"><div class="tableOfContents_TN1Q thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#options" class="table-of-contents__link toc-highlight">Options</a><ul><li><a href="#buffer-number" class="table-of-contents__link toc-highlight"><code>buffer</code> number</a></li><li><a href="#columnthreshold-number" class="table-of-contents__link toc-highlight"><code>columnThreshold</code> number</a></li><li><a href="#columnwidth-number--conatinerwidth-number--number" class="table-of-contents__link toc-highlight"><code>columnWidth</code> number | (conatinerWidth: number) => number</a></li><li><a href="#delimiter-string--null" class="table-of-contents__link toc-highlight"><code>delimiter</code> string | null</a></li><li><a href="#easing-string" class="table-of-contents__link toc-highlight"><code>easing</code> string</a></li><li><a href="#filtermode-shufflefiltermode" class="table-of-contents__link toc-highlight"><code>filterMode</code> Shuffle.FilterMode</a></li><li><a href="#group-string" class="table-of-contents__link toc-highlight"><code>group</code> string</a></li><li><a href="#gutterwidth-number--conatinerwidth-number--number" class="table-of-contents__link toc-highlight"><code>gutterWidth</code> number | (conatinerWidth: number) => number</a></li><li><a href="#initialsort-sortoptions--null" class="table-of-contents__link toc-highlight"><code>initialSort</code> SortOptions | null</a></li><li><a href="#iscentered-boolean" class="table-of-contents__link toc-highlight"><code>isCentered</code> boolean</a></li><li><a href="#isrtl-boolean" class="table-of-contents__link toc-highlight"><code>isRTL</code> boolean</a></li><li><a href="#itemselector-string" class="table-of-contents__link toc-highlight"><code>itemSelector</code> string</a></li><li><a href="#roundtransforms-boolean" class="table-of-contents__link toc-highlight"><code>roundTransforms</code> boolean</a></li><li><a href="#sizer-htmlelement--string--null" class="table-of-contents__link toc-highlight"><code>sizer</code> HTMLElement | string | null</a></li><li><a href="#speed-number" class="table-of-contents__link toc-highlight"><code>speed</code> number</a></li><li><a href="#staggeramount-number" class="table-of-contents__link toc-highlight"><code>staggerAmount</code> number</a></li><li><a href="#staggeramountmax-number" class="table-of-contents__link toc-highlight"><code>staggerAmountMax</code> number</a></li><li><a href="#usetransforms-boolean" class="table-of-contents__link toc-highlight"><code>useTransforms</code> boolean</a></li></ul></li><li><a href="#sorting-object" class="table-of-contents__link toc-highlight">Sorting object</a><ul><li><a href="#by-element-htmlelement--any" class="table-of-contents__link toc-highlight"><code>by</code> (element: HTMLElement) => any</a></li><li><a href="#compare-a-shuffleshuffleitem-b-shuffleshuffleitem--number" class="table-of-contents__link toc-highlight"><code>compare</code> (a: Shuffle.ShuffleItem, b: Shuffle.ShuffleItem) => number</a></li><li><a href="#key-keyof-shuffleshuffleitem" class="table-of-contents__link toc-highlight"><code>key</code> keyof Shuffle.ShuffleItem</a></li><li><a href="#randomize-boolean" class="table-of-contents__link toc-highlight"><code>randomize</code> boolean</a></li><li><a href="#reverse-boolean" class="table-of-contents__link toc-highlight"><code>reverse</code> boolean</a></li></ul></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="row footer__links"><div class="col footer__col"><div class="footer__title">Docs</div><ul class="footer__items clean-list"><li class="footer__item"><a class="footer__link-item" href="/Shuffle/docs/install">Installation</a></li><li class="footer__item"><a class="footer__link-item" href="/Shuffle/docs/faqs">FAQs</a></li></ul></div><div class="col footer__col"><div class="footer__title">Community</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://twitter.com/Vestride" target="_blank" rel="noopener noreferrer" class="footer__link-item">Twitter<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_ccw9"><path fill="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></li><li class="footer__item"><a href="https://stackoverflow.com/search?q=shuffle+js" target="_blank" rel="noopener noreferrer" class="footer__link-item">Stack Overflow<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_ccw9"><path fill="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></li></ul></div><div class="col footer__col"><div class="footer__title">More</div><ul class="footer__items clean-list"><li class="footer__item"><a href="https://github.com/Vestride/Shuffle" target="_blank" rel="noopener noreferrer" class="footer__link-item">GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_ccw9"><path fill="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></li><li class="footer__item"><a href="http://codepen.io/pen?template=qrjOpX" target="_blank" rel="noopener noreferrer" class="footer__link-item">CodePen template<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_ccw9"><path fill="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></li></ul></div></div><div class="footer__bottom text--center"><div class="footer__copyright">Copyright © 2022 Glen Cheney. Built with Docusaurus.</div></div></div></footer></div>
|