JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://www.snorkl.tv/dev/libs/greensock/TweenMax.min.js"></script>
<script src="http://www.snorkl.tv/dev/libs/greensock/plugins/ColorPropsPlugin.min.js"></script>
<h3>click anywhere</h3>
<div class="box" id="broken"></div>
<div class="box" id="fixed"></div>

CSS

.box {
            position: absolute;
            width: 50px; height: 50px;
            top: 50%; left: 50%;
            margin: -25px 0 0 -25px;
            background: #bada55;
            border-radius: 3px;
        }

#fixed{
    top: 25%; left: 50%;
    background-color:#f3f;
    
}

JavaScript

//artifacts visible from green box 
//Mac Chrome Version 21.0.1180.79 

//iMac video card: ATI Radeon HD 4850


var $broken = $('#broken');
var $fixed = $('#fixed');

        function moveBox(e) {
            console.log('Click!');
            var x = e.pageX,
                y = e.pageY;
//green
            TweenMax.to($broken, 1.4, {
                css: { left: Math.random()*300, top: Math.random()*300, scale: Math.random() * 2 + 1,  },
                ease:Elastic.easeOut
            });
            
//magenta            
            TweenMax.to($fixed, 1.4, {
                css: { left: Math.random()*300, top: Math.random()*300, scale: Math.random() * 2 + 1 },
                ease:Elastic.easeOut
            });
        }

        $(window).on('click', moveBox);