JSFiddle - React, Tailwind, and code Playground

by jscheel

HTML

<script src="https://cdn.rawgit.com/julianshapiro/velocity/master/velocity.min.js"></script>
<div id="box"></div>
<label>Loop</label>
<input type="radio" name="loop" value="10" checked>10x
<input type="radio" name="loop" value="-1">Infinite
<br><br>
<button id="start">start</button>
<button id="stop">stop</button>
<button id="finish">finish</button>
    <p>Open devtools and inspect the block box. Start the animation, then stop it.</p>

CSS

#box {
    position: absolute;
    background-color: #000;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    top: 50%;
    left: 50%;
}

input[type=radio] {
    margin-left: 1em;
}
}

JavaScript

$('#start').on('click', function(){
    $('#box').velocity('stop');
    var loopRadioVal = parseInt($('input[name=loop]:checked').val(), 10);
    var loop = loopRadioVal == -1 ? true : loopRadioVal;
    $('#box').velocity({
        'rotateZ': '360deg'
    }, {
        loop: loop,
        duration: 1000,
        easing: 'linear'
    });
    $(this).attr('disabled', '');
});

$('#stop').on('click', function(){
    $('#box').velocity('stop', true);
    $('#start').removeAttr('disabled');
});

$('#finish').on('click', function(){
    $('#box').velocity('finish', true);
    $('#start').removeAttr('disabled');
});