- Written in ES6, but you don't need any ES6 polyfills.
- jQuery and Modernizr are no longer dependencies.
- Dropped active support for IE<11.
- The build system is now gulp with webpack and babel.
- Documentation has been improved. Each demo has a code example.
- Tests rewritten with mocha/chai/sinon and run with PhantomJS from the command line. The tests can also be run in the browser with
- No longer a jQuery plugin. Shuffle uses Webpack's UMD wrapper. If you're using globals, it will be exported to the global object (
window.shuffleinstead of extending the jQuery prototype.
- Shuffle now only emits 2 events,
doneevents have been removed because initialization is now synchronous.
- Emitted events use the native
CustomEvent(a polyfill is included for IE11). This means that the data associated with the event is in the
detailproperty and if you're still using jQuery, you'll need to access the event data from the
originalEventproperty jQuery adds to its event.
shufflemethod has been renamed to
appendedmethod has been renamed to
add. It expects only one parameter: an array of elements.
- Class names added to shuffle items has changed.
shuffle-item--hidden. You can access (or change) these class names from
Staggered animations. The new
staggerAmountoption allows you to define an incremental transition delay in milliseconds for the items.
You can customize the default styles which are applied to Shuffle items upon initialization, before layout, after layout, before hiding, and after hidden. For example, if you want to add a 50% red background to every element:
Shuffle.ShuffleItem.Css.INITIAL.backgroundColor = 'rgba(255, 0, 0, 0.5)';
Or maybe you want to set the text color to
tealafter the item has finished moving:
Shuffle.ShuffleItem.Css.VISIBLE.after.color = 'teal';
Or, instead of items shrinking when they are hidden, make them grow:
Shuffle.ShuffleItem.Scale.HIDDEN = 2;