JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<div id="pad">
</div>

CSS

#pad{
    background:#aaa;
    width:800px;
    height:300px;
}

JavaScript

var pad = Raphael(('pad'), 800, 300);

var bigcposx = 400;
var bigcposy = 150;
var bigcradius = 50;
var bigcstrokewidth = 10;



var smallwidth = 50;
var bigwidth = 300;

var middleboxy = 300 / 2 - smallwidth / 2;
var middleboxx = 800 / 2 - smallwidth / 2;

var bigc = pad.circle(bigcposx, bigcposy, 0).attr({
    stroke: '#fff',
    'stroke-width': bigcstrokewidth
})


    
var small1 = pad.rect(bigcposx - (smallwidth * 2) + 10, middleboxy - bigcradius, smallwidth, smallwidth, 20).attr({
    stroke: '#fff',
    'stroke-width': 10,
    opacity: '0'
});
    
var small2 = pad.rect(bigcposx - (smallwidth * 2) + 10, middleboxy + bigcradius, smallwidth, smallwidth, 20).attr({
    stroke: '#fff',
    'stroke-width': 10,
    opacity: '0'
});

var small3 = pad.rect(middleboxx + bigcradius + 10, middleboxy - bigcradius, smallwidth, smallwidth, 20).attr({
    stroke: '#fff',
    'stroke-width': 10,
    opacity: '0'
});

var small4 = pad.rect(middleboxx + bigcradius + 10, middleboxy + bigcradius, smallwidth, smallwidth, 20).attr({
    stroke: '#fff',
    'stroke-width': 10,
    opacity: '0'
});

bigc.animate({
    r: bigcradius
}, 500, "bounce", function() {
    
    small1.animate({
        width: bigwidth,
        x: bigcposx - (smallwidth * 2) + 10 - (bigwidth-smallwidth),
        opacity: 1
    }, 500, '<');
    small2.animate({
        width: bigwidth,
        x: bigcposx - (smallwidth * 2) + 10 - (bigwidth-smallwidth),
        opacity: 1
    }, 500, '<');
    small3.animate({
        width: bigwidth,
        opacity: 1
    }, 500, '<');
    small4.animate({
        width: bigwidth,
        opacity: 1
    }, 500, '<');
});