JSFiddle - React, Tailwind, and code Playground

by anagnam

HTML

<script src="http://relumastudio.com/download/TweenMax.min.js"></script>
<script src="http://relumastudio.com/download/EasePack.min.js"></script>
<script src="http://relumastudio.com/download/BezierPlugin.min.js"></script>
<script src="http://relumastudio.com/download/bug.png"></script>
<script src="http://relumastudio.com/download/jquery-1.9.1.min.js"></script>
<body>
    <section id="wrap">
        <section id="container"></section>
    </section>
</body>

CSS

* {
    margin: 0;
    padding: 0;
}
#wrap {
    width: 600px;
    height: 600px;
    margin: 0 auto;
    border: 1px solid red;
}
#container {
    position: relative;
}

JavaScript

function getRanPos(min, max) {
    return Math.random() * (max - min) + min;
}

//the bug object

var Insect = function (target) {
    this.target = target;
    this.getTarget = function () {
        return this.target;
    };
};

//the bug object prototype

Insect.prototype.wander = function (d, t) {
    var posX1 = Math.floor(getRanPos(1, 600));
    var posY1 = Math.floor(getRanPos(1, 600));
    var posX2 = Math.floor(getRanPos(1, 600));
    var posY2 = Math.floor(getRanPos(1, 600));
    var posX3 = Math.floor(getRanPos(1, 600));
    var posY3 = Math.floor(getRanPos(1, 600));
    var posX4 = Math.floor(getRanPos(1, 500));
    var posY4 = Math.floor(getRanPos(1, 500));
    var posX5 = Math.floor(getRanPos(1, 500));
    var posY5 = Math.floor(getRanPos(1, 500));
    var posX6 = Math.floor(getRanPos(1, 500));
    var posY6 = Math.floor(getRanPos(1, 500));
    var s = getRanPos(8, 16); // duration of tween
    var c = getRanPos(0, 1); // curviness
    var moveto = new TweenMax(d, s, {
        css: {
            bezier: {
                type: "soft",
                values: [{
                    x: posX1,
                    y: posY1
                }, {
                    x: posX2,
                    y: posY2
                }, {
                    x: posX3,
                    y: posY3
                }, {
                    x: posX4,
                    y: posY4
                }, {
                    x: posX5,
                    y: posY5
                }, {
                    x: posX6,
                    y: posY6
                }],
                autoRotate: true
            }
        },
        ease: SlowMo.ease.config(0.8, 0.3),
        delay: t
    });
    TweenLite.delayedCall(s * 0.7, this.wander, [d, 0], this)

};

//creating instances of the bug object

for (i = 1; i <= 100; i++) {
    var section = document.getElementsByTagName("section")[1];
    var div = section.appendChild(document.createElement("div"));
    div.className = "box" + i;
   ...