JSFiddle - React, Tailwind, and code Playground

by AtheistP3ace

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.2.3/velocity.js"></script>
<button class="speedUp">speed up</button>
<button class="speedDown" disabled="true">speed down</button>
<button class="stop">stop</button>
<button class="start" disabled="true">start</button>
<div class="gear gearRight">rotate right</div>
<div class="gear gearLeft">rotate left</div>

CSS

.gear {
    width: 100px;
    height: 100px;
    position: absolute;
    background: red;
}

.gearRight {
    top: 100px;
    left: 100px;
}

.gearLeft {
    top: 300px;
    left: 100px;
}

JavaScript

var currentSpeed = 5000;

function loopMeLeft() {
    $('.gearLeft').velocity({
        rotateZ: "-=360"
    }, {
        duration: currentSpeed,
        easing: "linear",
        complete: loopMeLeft
    });
}

function loopMeRight() {
    $('.gearRight').velocity({
        rotateZ: "360"
    }, {
        duration: currentSpeed,
        easing: "linear",
        loop: true
    });
}

function checkButtons () {
	if (currentSpeed == 1000) {
    	$('.speedUp').prop('disabled', true);
    }
    else {
    	$('.speedUp').prop('disabled', false);
    }
	if (currentSpeed == 5000) {
    	$('.speedDown').prop('disabled', true);
    }
    else {
    	$('.speedDown').prop('disabled', false);
    }
}

loopMeLeft();
loopMeRight();

$('.speedUp').on('click',
    function() {
        if (currentSpeed != 1000) {
            $('.gear').velocity("finish", true);
            currentSpeed = currentSpeed - 1000;
            loopMeLeft();
            loopMeRight();
            checkButtons();
        }
    }
);

$('.speedDown').on('click',
    function() {
        if (currentSpeed != 5000) {
            $('.gear').velocity("finish", true);
            currentSpeed = currentSpeed + 1000;
            loopMeLeft();
            loopMeRight();
            checkButtons();
        }
    }
);

$('.stop').on('click',
    function() {
        $('.gear').velocity("stop", true);
        $('.start').prop('disabled', false);
        $(this).prop('disabled', true);
    }
);

$('.start').on('click',
    function() {
        loopMeLeft();
		loopMeRight();
        $('.stop').prop('disabled', false);
        $(this).prop('disabled', true);
    }
);