JSFiddle - React, Tailwind, and code Playground

by philll_t

HTML

<div class="recording" id="wave">

</div>

SCSS

@keyframes fade-out-right {
  from {
    right: 50%;
    opacity: 1;
  }

  to {
    right: 0%;
    opacity: 0;
  }
}

@keyframes fade-out-left {
  from {
    left: 50%;
    opacity: 1;
  }

  to {
    left: 0%;
    opacity: 0;
  }
}

.recording {
    position: relative;
    display: block;
    height: 50px;
    width: 50px;


  .bar {
    height: 1%;
    width: 2px;
    background-color: gray;
    opacity: 0;
    position: absolute;
    margin: auto;
    top: 0px;
    bottom: 0px;
    transition: height 300ms;

    &.to-right {
      right: 50%;
      animation: linear 900ms fade-out-right;
    }
    
    &.to-left {
      left: 50%;
      animation: linear 900ms fade-out-left;
    }
   }
}

Babel + JSX

class WaveAnimation {
    constructor(options) {
        this._container    = options.container;
        this._waveInterval = null;
        this._waveTrough   = options.waveTrough || 2;
        this._magnitude    = 0;
        this._waveCrest    = options.waveCrest || 100;
        this._measureUnit  = options.measureUnit || "%";
        this._wavePulse    = options.waveInterval || 100;
        this._waveLife     = options.waveLife || 900;
        this._wavePre      = options.wavePre || 100;
        this._useRandom    = options.useRandom || false;
    }
    
    _createWave (magnitude) {
    console.log(magnitude);
        const 
            left  = document.createElement("div"),
            right = document.createElement("div");

        left.className  = "bar to-right";
        right.className =  "bar to-left";

        this._container.appendChild(left);
        this._container.appendChild(right);

         setTimeout(() => {
            left.style.height  = magnitude;
            right.style.height = magnitude;
        }, this._wavePre);

        setTimeout(() => {
            this._container.removeChild(left);
            this._container.removeChild(right);
        }, this._waveLife);
		}
    
    _getRandomInt(min, max) {
        const 
          m = Math.ceil(min),
          x = Math.floor(max);
        
        return Math.floor(Math.random() * (x - m + 1)) + m;
    }
    
    start() {
    		this._waveInterval = setInterval( () => {
        		this._useRandom ?
   		  		this._createWave(this._getRandomInt(this._waveTrough, this._waveCrest) + this._measureUnit) :
            this._createWave(this._magnitude + this._measureUnit);
				}, this._wavePulse);
    }
    
    stop() {
        clearInterval(this._waveInterval);
    }
    
    get magnitude() {
        return this._magnitude;
    }
    
    set magnitude(m) {
        this._magnitude = m;
    }
    
    get useRandom() {
      	return this._useRandom;
    }
    
    set useRandom(ur) {
       ...