JSFiddle - React, Tailwind, and code Playground

by considerphlebas

HTML

<div id="paper"></div>
<p>Note: mouseover areas are colored blue for clarity, they will be invisible in final product</p>

JavaScript

xValues = [50, 50];
yValues = [100, 120];

var mouseoverStarts = [70, 90, 130],
    mouseoverEnds =  [90, 130, 150],
    mouseoverItems =  [[0], [0, 1], [1]];

var p0 = Raphael("paper", 500, 500);

var circles = []
for (i = 0; i < 2; i++) {
    circles[i] = p0.circle(xValues[i], yValues[i], 10);
    circles[i].attr({"fill": "#c00", stroke: "#888", "stroke-width":1.5});
    circles[i].id = "c"+i;
};

animate_on = function(num, ignoreindex, ignorearray) {
        if (moboxonoff[num] === 0) {
            p0.getById("c"+num).stop().animate({r: 30}, 480, "bounce");
            p0.getById("c"+num).toFront();
            moboxonoff[num] = 1
        };
};
animate_off = function(num, ignoreindex, ignorearray) {
        if (moboxonoff[num] == 1) {
            p0.getById("c"+num).stop().animate({r: 10}, 320, "bounce");
            moboxonoff[num] = 0
        };
};

moboxonoff = [];
for (i=0; i<2; i++) {
    moboxonoff[i] = 0;
};

debugopacity = 0.2; // set to 0 for final

moboxes = [];
for (i=0; i<mouseoverStarts.length; i++) {
    moboxes[i] = p0.rect(30, mouseoverStarts[i], 400, mouseoverEnds[i] - mouseoverStarts[i]);
    moboxes[i].attr({fill: "#00f", opacity: debugopacity});
    moboxes[i].id = "mob" + i;
    moboxes[i].hover(function () {
        j = parseInt(this.id.slice(3));
        mouseoverItems[j].forEach(animate_on);
        this.toFront();
        }, function () {
        mouseoverItems[j].forEach(animate_off);
        });
};