CSGO Empire Roulette

Just trying to recreate something I saw on a gambling site. Looked pretty straightforward

HTML

<div class="outer">
  <div id="roulette" class="inner roulette"></div>
</div>
<button id="spin-button">Spin</button>

CSS

.outer {
  position: relative;
  max-width: 700px;
  height: 142px;
}

.inner {
  background-image: url("https://csgoempire.com/dist/img/coins.png");
  background-repeat: repeat-x;
  background-position: 0 0, center;
  width: 100%;
  height: 100%;
  -webkit-transition: background-position 5s;
  transition: background-position 5s;
  transition-timing-function: cubic-bezier(.13,.83,.45,.93);
  -webkit-transition-timing-function: cubic-bezier(.13,.83,.45,.93);
}

JavaScript

var Constants = { 
  /* COINS_BACKGROUND_HEIGHT: 100, */
  COINS_IMG_HEIGHT : 142,
  COINS_IMG_WIDTH : 1480.9859154929577,
  COIN_WIDTH: 98.73239436619718
};

var button = document.getElementById('spin-button');
button.addEventListener('click', function(e) {
  var randomRouletteSpin = (Math.floor(Math.random() * (Constants.COINS_IMG_WIDTH*5 - Constants.COINS_IMG_WIDTH*2)) + Constants.COINS_IMG_WIDTH*2)*-1;
  console.log(randomRouletteSpin);
  document.getElementById('roulette').style.backgroundPosition = randomRouletteSpin + 'px ' + '0px';
});