JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael-min.js"></script>
<div id="canvas"></div>

JavaScript

var elie, paper = Raphael("canvas", 500, 500);
var transformT = "t100,100";
    elie = paper.rect(0,0,100,100).attr("fill","#000");
    elie2 = paper.rect(100,100,100,100).attr("fill","#000");
    elies = paper.set(elie,elie2);

    elies.animate({transform: transformT }, 1000);

    elies.hover(function() {
      console.log("OMG THIS HAPPENS SO MANY TIMES");
        elies[0].transform("");
        elies[1].transform("");
//        elies.toFront(); // breaks IE
//        elies.toBack(); // breaks IE
        elies.attr({fill:"#FFF", stroke: "#0000FF", "stroke-width": 5});

        elies.attr({transform: transformT+"s2,2"}); // doesn't break IE, but does cause lots of mouseovers only in IE

/* Replacing above line with this seems to sometimes break IE
        elies.transform(""); 
        elies.transform(transformT+"s2,2");
*/
/* Easy way to stop the mouseover proliferation - replace transform with this      
        if (!elies[0].data("hovered")) {
            elies.attr({transform: transformT+"s2,2"});
            elies[0].data("hovered", true);
        }            
*/        
        
    },function() {
        elies.attr({fill:"#000",stroke: 0, "stroke-width": 0});
        elies[0].data("hovered", false);

//        elies.transform("");
//        elies.transform(transformT+"s1,1");
        elies.attr({transform: transformT+"s1,1"});});