JSFiddle - React, Tailwind, and code Playground

HTML

<div id="target"></div>

CSS

#target {
    width: 50px;
    height: 50px;
    background: red;
    position: absolute;
    border-radius: 50px;
    transition: all .3s;
    -webki-transition: all .3s;
    -moz-transition: all .3s;
}

JavaScript

var target = document.getElementById("target");

document.onclick = function(){
    target.setAttribute("style", 
                        "transform: translateX("+ 50 +"px) "+
                                   "translateY("+ 50 + "px)"
    );
}

function anim(){

var counter = 0;
var increase = Math.PI * 2 / 100;

for ( i = 0; i <= 100; i += 0.01 ) {
x = i;
y = Math.sin( counter ) / 2 + 0.5;
counter += increase;
}
}