JSFiddle - React, Tailwind, and code Playground

by Slezi

HTML

<div id="mainRot" class="main-pedal">
  <div class="top-pedal">
  
  </div>
  <div class="bottom-pedal">
 
  </div>
</div>

<button onclick="buttonClicked()">
SetRandVal
</button>

CSS

.main-pedal {
  margin-left: 200px;
	transform-origin: center center;
  animation-fill-mode: forwards;
}
.top-pedal {
  width: 90px;
  height: 200px;
  background-color: red;
}
.bottom-pedal {
  width: 90px;
  height: 200px;
}

JavaScript

/*document.getElementById("mainRot").animate([
  // keyframes
  { transform: 'skew(30deg,0deg)' },
  { transform: 'skew(80deg,0deg)' },
  { transform: 'skew(30deg,0deg)' }
], {
  // timing options
  duration: 1000,
  iterations: Infinity
});*/

/*document.getElementById("mainRot").animate([
    { transform: 'skew(20deg,0deg) scale(1, 1)' },
    { transform: 'skew(40deg,0deg) scale(1, 0.6)' },
    { transform: 'skew(20deg,0deg) scale(1, 1)' },
	], {
    duration: 1000,
    iterations: Infinity
});*/

function buttonClicked() {	
  var rand = Math.random();
  console.log(rand);
  setToValue(rand);
}

function setToValue(valueToSet){
	var skewVal = scale(valueToSet, 0, 1, 20, 40);
	var scaleVal = scale(valueToSet, 0, 1, 1, 0.6);
  
  /*document.getElementById("mainRot").animate([
      { transform: 'skew(' + skewVal + 'deg,0deg) scale(1, ' + scaleVal + ')' }
    ], {
      duration: 1000
  });*/
  
  document.getElementById("mainRot").style.transform = ('skew(' + skewVal + 'deg,0deg) scale(1, ' + scaleVal + ')');
}

const scale = (num, in_min, in_max, out_min, out_max) => {
  return (num - in_min) * (out_max - out_min) / (in_max - in_min) + out_min;
}