JSFiddle - React, Tailwind, and code Playground

by louisbros

HTML

<script src="https://gist.github.com/louisbros/5456222/raw/1405f22b9fbfe9064643e0f87bee07e0f207c8f3/Animator.js"></script>
<div id="test"></div>

CSS

#test {
    position:absolute;
    width:100px;
    height:100px;
    background-color:#3D6AA2;
    border-radius:50%;
}

JavaScript

var test = document.getElementById('test');
var animator = new Animator();
animator.animate(test.style, 'width', 'px', 100, 200, 1000, 'easeInOutCubic', null, null);
animator.animate(test.style, 'height', 'px', 100, 200, 1000, 'easeInOutCubic', null, null);
animator.animate(test.style, 'left', 'px', 0, 200, 2000, 'easeOutBounce', null, null);
animator.animate(test.style, 'top', 'px', 0, 200, 2000, 'easeOutBounce', null, null);