<h1>Slot Machine</h1>
<div class="container">
  <div class="slot">
    <div class="base-machine">
      <div class="base-frame">
        <div class="slots">
            <ul class="list list1">
                  <li>$4</li>
                  <li>$1</li>
                  <li>$65</li>
                  <li>$21</li>
                  <li>$0</li>
                  <li>$8</li>
                  <li>$32</li>
                  <li>$45</li>
                  <li>$56</li>
                  <li>$3</li>
            </ul>
        </div>
        <div class="slots">
           <ul class="list list2">
                  <li>$4</li>
                  <li>$1</li>
                  <li>$65</li>
                  <li>$21</li>
                  <li>$0</li>
                  <li>$8</li>
                  <li>$32</li>
                  <li>$45</li>
                  <li>$56</li>
                  <li>$3</li>
            </ul>
        </div>
        <div class="slots">
          <ul class="list list3">
                  <li>$4</li>
                  <li>$1</li>
                  <li>$65</li>
                  <li>$21</li>
                  <li>$0</li>
                  <li>$8</li>
                  <li>$32</li>
                  <li>$45</li>
                  <li>$56</li>
                  <li>$3</li>
          </ul>
        </div>
        <div class="trapezoid">
          <div class="edge"></div>
        </div>
      </div>
    </div>
    <div id="slot-trigger">
      
      <svg id="trigger" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="35" height="143.6" viewBox="0 0 35 143.6">
        <defs>
          <linearGradient id="linear-gradient" x1="6.21" y1="143.63" x2="6.21" y2="67.37" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#515151"/>
            <stop offset="0.21" stop-color="#989898"/>
            <stop offset="0.51" stop-color="#e3e3e3"/>
            <stop offset="0.82" stop-color="#949494"/>
            <stop offset="1" stop-color="#444"/>
          </linearGradient>
          <linearGradient id="linear-gradient-2" x1="23.71" y1="127.98" x2="23.71" y2="83.01" xlink:href="#linear-gradient"/>
          <linearGradient id="linear-gradient-3" x1="20.46" y1="55.66" x2="25.41" y2="55.66" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#6b6b6b"/>
            <stop offset="1" stop-color="#454545"/>
          </linearGradient>
          <radialGradient id="radial-gradient" cx="23.05" cy="12.33" fx="31.426365772510508" r="12.04" gradientTransform="translate(1.5 -0.3) scale(0.93 0.93)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#e47f7f"/>
            <stop offset="0.68" stop-color="#ae292a"/>
          </radialGradient>
        </defs>
        <path id="ring1" d="M0,67.4H7.3a5.1,5.1,0,0,1,5.1,5.1v66.1a5.1,5.1,0,0,1-5.1,5.1H0a0,0,0,0,1,0,0V67.4A0,0,0,0,1,0,67.4Z" fill="url(#linear-gradient)"/>
        <path id="ring2" d="M12.4,83H29.7A5.3,5.3,0,0,1,35,88.3v34.4a5.3,5.3,0,0,1-5.3,5.3H12.4a0,0,0,0,1,0,0V83A0,0,0,0,1,12.4,83Z" fill="url(#linear-gradient-2)"/>
        <ellipse id="hole" cx="22.9" cy="88.6" rx="5.9" ry="2.2" fill="#3f3f3f"/>
        <rect id="stick" x="20.5" y="22.2" width="5" height="66.88" fill="url(#linear-gradient-3)"/>
        <ellipse id="head" cx="22.9" cy="11.3" rx="11.2" ry="11.3" fill="url(#radial-gradient)"/>
      </svg>

     </div>
    </div>
  </div>
</div>

/*  Chaange the artboard size here  */
\:root
  --width: 70vw
  --height: 60vh
  --machine-w: calc(var(--width) * .7)
  --machine-h: 266px

@import url('https://fonts.googleapis.com/css?family=Open+Sans:600')

body
  font-family: 'Open Sans', sans-serif
  font-weight: 600
  text-align: center
  background: #eff2f7

h1
  color: #aaa
  margin-top: 3rem
  
/*.container 
  display: flex
  align-items: center
  justify-content: center
  width: var(--width)
  height: var(--height)
  background: #fff
  margin: 40px auto
  border-radius: 15px
  box-shadow: 0px 20px 30px -10px rgba(39, 57, 86, .2) */
  
.slot
  display: flex
  align-items: center
  justify-content: center
  
#slot-trigger
  cursor: pointer

.base-machine
  width: var(--machine-w)
  height: var(--machine-h)
  background: -webkit-linear-gradient(top, #ff670f 0%,#ff670f 100%)
  border-radius: 15px 15px 0 0
  display: flex
  justify-content: center
  align-items: center
  box-shadow: inset 0 0px 3px #ffcc99, 0px 10px 30px rgba(0,0,0, .4)
  
  .base-frame
    width: calc(var(--machine-w) - 40px)
    height: calc(var(--machine-h) - 40px)
    background: -webkit-linear-gradient(top, #222 0%,#666 36%,#252525 100%)
    opacity: 1
    border-radius: 3px
    display: flex
    justify-content: space-evenly
    align-items: center
    box-shadow: inset 0 0 7px #000
      
  .slots
    width: calc((var(--machine-w) / 3) - 30px)
    height: calc(var(--machine-h) - 60px)
    background: -webkit-linear-gradient(top, #999 0%,#e8e8e8 15%,#ffffff 50%,#e8e8e8 85%,#999 100%)
    box-shadow: 0 0 15px -10px rgba(0, 0, 0, 0.5)
    border-radius: 6px
    font-size: 2rem
    line-height: 2
    overflow: hidden
 
.trapezoid
  width: calc(var(--machine-w))
  border-bottom: 20px solid #242424
  border-left: 20px solid transparent
  border-right: 20px solid transparent
  position: absolute
  margin-top: 280px
  display: flex
  justify-content: center
  .edge
    height: 40px
    width: calc(var(--machine-w) + 40px)
    background: linear-gradient(to bottom, #4c4c4c 0%,#2d2d2d 17%,#2d2d2d 17%,#111111 40%,#3f3f3f 76%,#131313 100%)
    position: absolute
    margin-top: 20px
    border-radius: 0 0 3px 3px
    
  
.list
  list-style-type: none
  padding: 0
  margin: .3rem auto

span.list
  height: 1em
  line-height: 1em

$(document).ready( function(){
  var list1 = $('.list1'),
      list2 = $('.list2'),
      list3 = $('.list3'),
      liHeight = $('li').outerHeight(),
      btnSpin = $('#slot-trigger'),
      head = $('#head'),
      stick = $('#stick'),
      hole = $('#hole');
  
  function spin() {
    var r1 = R(3,8),
        r2 = R(1,6),
        r3 = R(1,6);
    
    TweenMax.to(list1, 1.3, {y: 0-(liHeight*r1), ease: Elastic.easeInOut.config(6, 0)});
    TweenMax.to(list2, 1.3, {y: 0-(liHeight*r2), ease: Elastic.easeInOut.config(6, 0), delay: .1});
    TweenMax.to(list3, 1.3, {y: 0-(liHeight*r3), ease: Elastic.easeInOut.config(6, 0), delay: .2});
    console.log(r1, r2, r3, liHeight);
  }
  
  function slotTriggerMove() {
    TweenMax.set([head, stick, hole], {y:0, scale: 1});
    TweenMax.to(head, .4, {y: 70, repeat: 1, yoyo: true, ease:Sine.easeIn});
    TweenMax.to(stick, .4, {y: 14, scaleY: .3,transformOrigin:"50% 100%", repeat: 1, yoyo: true, ease:Sine.easeIn});
    TweenMax.to(hole, .4, {y: 10, scaleY: 2, repeat: 1, yoyo: true, ease:Sine.easeIn});
  }
  
//Generate random spin times
  function R(min,max) {
	  return Math.floor(Math.random() * (max - min) + min);
  };
  
// Button
  btnSpin.click(function(){
      slotTriggerMove();
      spin();
    }
  );

});