Create Slot Machine Animations With The Slotmachine.js Library

Preview:

Description:

Slotmachine.js is a tiny, dependency-free JavaScript library for creating Slot Machine-like shuffle animations without any 3rd-party dependencies.

With this library, you can animate an element from one position to another in a random circular way as if it was being shuffled by a machine.

How to use it:

1. Download and import the Slotmachine.js library.

<link rel="stylesheet" href="dist/slotmachine.css" />
<script src="dist/slotmachine.min.js"></script>

2. Add a group of elements to the slot machine.

<div id="mySlotMachine">
  <div>Slot 1</div>
  <div>Slot 2</div>
  <div>Slot 3</div>
  <div>Slot 4</div>
  <div>Slot 5</div>
</div>

3. Initialize the slot machine.

const el = document.querySelector('#mySlotMachine');
const machine = new SlotMachine(el, {
      // options here
});

4. Start the slot machine animation.

machine.shuffle();

5. Available options.

const machine = new SlotMachine(el, {
      // initial element
      // 0 = element 1
      active: 0,
      // duration in ms
      delay: 200,
      // custom function to randomize the result
      randomize: (_, max) => randomInteger(0, max),
      // up or down
      direction: 'up',
      
});

6. API methods.

// start the animation
machine.shuffle();
machine.shuffle(5);
machine.shuffle(Infinity);
// stop the animation after 3 spins
machine.stop(3);
// spin to the next element
machine.next();
// spin to the previous element
machine.prev();

7. Properties.

// get the next active element
machine.nextActive
// get the next element
machine.nextIndex
// get the previous element index
machine.prevIndex
// check if the slot machine is running.
machine.running
// check if the slot machine is stopping
machine.stopping
// get the current active element
machine.active