JSFiddle - React, Tailwind, and code Playground

by TastyBytes

HTML

<div class="container">
    <div class="outer">
        <div class="middle">
            <div class="inner"></div>
        </div>
    </div>
    <div class="caption">
        <h1>Brian Kelley</h1>
    </div>
</div>

CSS

* {
    margin: 0;
    padding: 0; 
}

.container {
    width: 100%;
    height: 400px;
    position: relative;
}

.outer {
    width: 100px;
    height:100px;
    
    background: #ccf;
    
    -moz-border-radius: 100px;
    -webkit-border-radius: 100px;
    border-radius: 100px;
    border-right: 0;
    
    position: absolute;
    top: 0;
    left: 0;
    
}

.middle {
    width: 75px;
    height: 75px;
    
    background: #aaf;
    
    -moz-border-radius: 38px;
    -webkit-border-radius: 38px;
    border-radius: 38px;    
    
    position: absolute;
    top: 12.5px;
    left: 12.5px;
}

.inner {
    width: 50px;
    height: 50px;
    
    background: #55c;
    
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
    border-right: 0;
   
    position: absolute;
    top: 12.5px;
    left: 12.5px;
}

.caption {
   /* background: #fff; */
    position: absolute;
    top: 60px;
    left: 60px;
    width: 600px;
    height: 300px;
    vertical-align: text-top; 
    background: #fff;
}

.caption h1 { 
    font: normal normal bold 95px sans-serif; 
    text-shadow: -2px -2px 0px #fff, 2px -2px 0px #fff;
    vertical-align: text-top; 
    line-height: 73px;
    margin: -10px 0 0 -10px; 
    padding: 0; 
    text-indent: -5px;
}

JavaScript

var inner = $$('.inner');
var middle = $$('.middle');
var outer = $$('.outer');

inner.setStyles({width: '0', height: '0', top: '37px',left: '37px'});
middle.setStyles({width: '0', height: '0', top: '50px',left: '50px'});
outer.setStyles({width: '0', height: '0', top: '50px',left: '50px'});

inner.set('morph', {link: 'chain',duration:'250', transition: Fx.Transitions.Quad.easeIn});
middle.set('morph', {link: 'chain',duration:'250', transition: Fx.Transitions.Quad.easeIn,onComplete:function(){
        inner.morph({
            height: '50px',
            width: '50px',
            top: '12.5px',
            left: '12.5px'
        });
    }                    
});
outer.set('morph', {link: 'chain',duration:'250', transition: Fx.Transitions.Quad.easeIn,onComplete:function(){
        middle.morph({
            height: '75px',
            width: '75px',
            top: '12.5px',
            left: '12.5px'
        });
    }
});


outer.morph({
    height: '100px', 
    width: '100px', 
    top: '0', 
    left: '0'
});
   

/*
*/