JSFiddle - React, Tailwind, and code Playground

by schrodingers

HTML

<script src="://cdn.rawgit.com/web-animations/web-animations-js/2.1.2/web-animations.js"></script>
<main class="animations-api">
  <ul class="dots">
  <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
    <li class="dot"></li>
  </ul>
  
  <div class="controls">
  <div data-mapping="head">
    <label>Head</label>
    <input type="range" min="0" max="100" />
    <button class="pause">&#9616;&#9616;</button>
    <button class="rate-2x">2x</button>
  </div>
  </div>
  
</main>

CSS

/* body {
  display: flex;  
  align-items: center;
  justify-content: center;
} */

.dots {
  margin: 30% 50%;
}

.dot {
  position: absolute;  
  display: block;  
  /* margin: 0.5em; */
  width: 1em;
  height: 1em;
  /* background: dodgerblue; */
  border-radius: 50%;
}

body {
  font-size: 0.6em;
}
.controls{
  position: absolute;  
  margin: 70% auto; 
  
}

JavaScript

/* Web animations api with player */


var colors = ["#ff6699", "#ff9900", "#ffcc00", "#9adb1b", "#00cc66", "#00cccc", "#00ccff", "#6633cc", "#ff66cc"];


var dots = document.querySelectorAll(".dot");
for (var i = 0; i < dots.length; ++i) {
  var dot = dots[i];  
  var col = colors[i]; 
  
  
  dot.style.background = col; 
  // KeyFrames for each dot
  var start = (i / dots.length) * 360;
  var frames = [
  {transform: 'rotate(' + start + 'deg) translate(10em)'},          
    {transform: 'rotate(' + (360 - (i * dots.length)) + 'deg) translate(-10em) '},    
    
  ];
  
  // Timings
  var timing = {
    duration: 2500,        
    iterations: Infinity,    
    direction: 'alternate',        
    fill: 'both',
    easing: 'ease-in-out',
  }  
  // Go!
  dot.animate(frames, timing);



}


  var player = dot.animate();


var ranges = document.querySelectorAll('input[type="range"]');
for (let i = 0, len = ranges.length; i < len; i++) {
  var range = ranges[i];
  range.disabled = true;
  range.value = 0;
  range.addEventListener('change', rangeHandler);
}
var pauses = document.querySelectorAll('.pause');
for (let i = 0, len = pauses.length; i < len; i++) {
  pauses[i].addEventListener('click', pauseHandler);
}
function rangeHandler(e) {
  var target = e.currentTarget;
  var percent = parseInt(target.value, 10)/100;
  
  var player = dot[target.parentNode.getAttribute('data-mapping')];
 
 player.currentTime = percent * duration;
  
}
function rateHandler(e) {
  var target = e.currentTarget;
  
  
  var player = dot[target.parentNode.getAttribute('data-mapping')];
 
 var wasActive = target.classList.contains('active');
 target.classList[wasActive ? 'remove' : 'add']('active');
 player.playbackRate = wasActive ? 1 : 2;
}

function pauseHandler(e) {
  var target = e.currentTarget;
  var mapping = target.parentNode.getAttribute('data-mapping');
  
  var player = dot[mapping];
  
  if (player.playState === 'paused') {
    player.play();
   ...