JSFiddle - React, Tailwind, and code Playground

by levchenko_d

HTML

<div class="flipper" data-start-value="0" data-end-value="0" data-shuffle-type="number">
  <div class="holder">0</div>
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
  </div>
</div>

<div class="flipper" data-end-value="0">
  <div class="holder">0</div>
  
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
  </div>

</div>

<div class="flipper" data-end-value="1">
  <div class="holder">0</div>
  
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
  </div>

</div>

<div class="flipper" data-end-value="8">
  <div class="holder">0</div>
  
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
  </div>

</div>
<div class="flipper" data-end-value="0">
  <div class="holder">0</div>
  
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
  </div>

</div>

<div class="flipper" data-end-value="2">
  <div class="holder">0</div>
  
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
  </div>

</div>

<div class="flipper" data-end-value="1">
  <div class="holder">0</div>
  
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
  </div>

</div>

<div class="flipper" data-end-value="€" data-shuffle-type="currency">
  <div class="holder">0</div>
  
  <div class="up">0</div>
  <div class="down">
    <div class="flip">
        <div class="front">0</div>
        <div class="back"></div> 
    </div>
 ...

CSS

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400|Raleway:300,400,500&subset=latin-ext');

/* Flipper */

.flipper{
  display: inline-block;
  width: 24px;
  height: 30px;
  position: relative;
  background: black;
  border-radius: 3px;
}

.flipper .up,
.flipper .down,
.flipper .holder{
  position: absolute;
   background: #2d3f4e; 
   width: 24px;
   height: 14px;
   overflow: hidden;
   text-align: center;
   color: #f6df42;
    font-weight: 600;
    font-size: 18px;
    font-family: 'Montserrat';
}

.flipper .up{
  border-radius: 3px 3px 0 0 ;
  line-height: 30px;
}


.flipper .holder{
  border-radius: 0 0 3px 3px;
  top: 15px;
  line-height: 0;
  -webkit-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -moz-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -ms-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -o-transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.flipper.flipping .holder{
  background: #000;
}

.flipper .down{
  perspective: 1000px;
  height: 30px;
  background: none;
  overflow: initial;
}


.flipper .flip{
  position: relative;
  margin-top: 0px;
  line-height: 0;
  transition: 0.2s;
  transform-origin: 100% 0px;
  top: 15px;
  height: 14px;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  -o-transform: rotateX(0deg);
  transform: rotateX(0deg);
}

.flipper.flipping .flip{
    -webkit-animation: 0.2s flip;
    -moz-animation: 0.2s flip;
    -ms-animation: 0.2s flip;
    -o-animation: 0.2s flip;
    animation: 0.2s flip;
    -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -moz-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    -ms-animation-timing-function:...

JavaScript

function loopInRandom(els, fn, int){
	var interval = null,
      id = 0,
      size = els.length,
      duration =size*int,
      passed = 0,
      arr = [].slice.call(els);
      
	interval = setInterval(function(){
  	if(passed != duration){
    	var randID = Math.round(Math.random() * (arr.length - 1));
    	fn(arr[randID]);
      arr.splice(randID, 1);
      passed+=int;
    } else {
    	clearInterval(interval);
    }
  }, int)
}



function shuffleFlip(flipper){
	var ranges = {
  			'number' : [0,1,2,3,4,5,6,7,8,9],
        'symbol' : ["!","@","#","$","%","^","&","*","+","/","?","|","€"],
        'letter' : ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"],
        'currency':["¤", "฿", "¢", "₡", "$", "€", "₴", "₲", "₱", "£", "¥"]
      },
      range = ranges[(flipper.getAttribute('data-shuffle-type') || 'number')],
  		rangeSize = range.length;
      
  var holder = flipper.querySelector('.holder'),
      up = flipper.querySelector('.up'),
      front = flipper.querySelector('.front'),
      endValue = flipper.getAttribute('data-end-value') || 'X',
      prevValue = flipper.getAttribute('data-start-value') || '';
      

			function apply(value){
      	front.innerText = value;
        flipper.className += ' flipping';
        up.innerText = value;

        setTimeout(function(){
           flipper.className = 'flipper';
           holder.innerText = value;
        }, 200);
      }
			
      function getRandomValue(){
      	var rand = Math.round(Math.random() * (rangeSize-1 || 1));
        if(range[rand] === endValue || range[rand] === prevValue){
        	return getRandomValue();
        } else {
        	prevValue = range[rand];
        	return range[rand];
        }
      }
	
			function applyRandom(){
        var randomValue = getRandomValue();
        apply(randomValue);
      }

      function applyEndValue(){
        apply(endValue);
      }

			var time = 0;
			var...