JSFiddle - React, Tailwind, and code Playground

by _sir

HTML

<script src="http://www.bitstorm.org/jquery/shadow-animation/jquery.animate-shadow.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<div class="logoHolder"><div id="circ"></div></div>

CSS

#circ { 
    width: 50px; 
    height: 50px; 
    background: #080; 
    border-radius: 50%;
    box-shadow: 0px 5px 20px #000;
    opacity: 0;
    position: absolute;
}

.logoHolder { 
    position: relative;
    width: 100px;
}

JavaScript

var $c = $('#circ');

function one(speed) {
    return $c.animate({
        opacity: 1,
        width: '50px',
        height: '50px',
        boxShadow: "0 2px 4px #0008",
        top: "10px",
        left: "10px"
    }, speed || 600, "easeOutBack").promise();
}

function two(speed) {
    return $c.animate({
        opacity: 1,
        width: '60px',
        height: '60px',
        boxShadow: "0 3px 10x #0008",
        top: "45px"
    }, speed || 200, "easeOutBounce").promise();
}

$c.width('200px').height('200px').css({
    'left':'-40px',
    'top':'-40px'
});

one();
/*
.then(function(){
    return two();
}).then(function(){ one(300); });
*/