JSFiddle - React, Tailwind, and code Playground

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container">
    <a href="https://www.google.hu/search?newwindow=1&safe=off&q=+rooftop&oq=+rooftop&gs_l=serp.3..0i131j0i67j0j0i67j0j0i67j0l4.5059.5059.0.5300.1.1.0.0.0.0.154.154.0j1.1.0....0...1c.1.64.serp..0.1.152.rVkKetUtPIg" target="_blank" class="name"></a>
    <div class="circle">
        <div class="tallhouse"></div>
    </div>
</div>

CSS

html, body{
    padding: 0;
    margin: 0;
    width: 420px;
    height: 300px;
    overflow: hidden;
    background-image: url('http://i.imgur.com/gT4KEeQ.png');
    background-repeat: no-repeat;
}
.container{
    opacity: 0;
    position: relative;
    width: 420px;
    height: 300px;
    background-color: #0B0B0B;
}
.name{
    opacity: 0;
    position: absolute;
    top: 25px;
    left: 50%;
    height: 41px;
    width: 300px;
    margin: 0 0 0 -150px;
    background-image: url('http://i.imgur.com/aR70vfe.png');
}
.circle{
    opacity: 0;
    position: absolute;
    height: 200px;
    width: 200px;
    margin: -70px 0 0 -100px;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    background-color: #FFF7AD;
    overflow: hidden;
}
.tallhouse{
    opacity: 0;
    width: 200px;
    height: 148px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: -20px; 
    right: 10px;
    background-image: url('http://i.imgur.com/6TxYiNx.png');
    background-size: 100% auto;
}

JavaScript

TweenMax.to(".container",0.3,{
        opacity: 1,
    	 ease: SlowMo.ease.config( 0.7, 0.7, false),
    	delay: 1,
	});
TweenMax.to(".circle", 1,{
    	opacity: 1,
    	delay: 1.2,
});
TweenMax.from(".circle", 1,{
    scale: 0,
    delay: 2,
    ease: Elastic. easeOut.config( 1, 0.7),
});
TweenMax.to(".tallhouse", 0.5,{
    	opacity: 1,
    	delay: 2.2,
});
TweenMax.from(".tallhouse", 1.5,{
    y: 50,
    delay: 2.2,
});
TweenMax.to(".name", 1.5,{
    opacity: 1,
    delay: 3.5,
});