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>
<script src="https://fonts.googleapis.com/css?family=Open+Sans:800"></script>
<div class="container">
    <div id="play"><span>►</span></div>
	<div class="night">
	    <div class="bg"></div>
        <div class="ground2"></div>
	    <div class="tree4"></div>
        <div class="carlton"></div>
	    <div class="house"></div>
	    <div class="moon"></div>
	    <div class="sky1"></div>
	    <div class="sky2"></div>
	    <div class="sky3"></div>
	    <div class="stars"></div>
        <div class="speachbubble"> este otthon ülsz?</div>
	</div>
	<div class="day">
	    <div class="bg"></div>
        <div class="ground2"></div>
	    <div class="tree4"></div>
	    <div class="house"></div>
	    <div class="moon"></div>
	    <div class="sky1"></div>
	    <div class="sky2"></div>
	    <div class="sky3"></div>
	    <div class="stars"></div>
	</div>
</div>

CSS

/*background-image: url('http://i.imgur.com/m2RJqa3.gif');*/
html, body{
    padding: 0;
    margin: 0;
    width: 420px;
    height: 300px;
    overflow: hidden;
}
#play{
    position: absolute;
    z-index: 9999;
    top: 50%;
    left: 50%;
    margin: -30px 0 0 -30px;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 12px solid #2973ad;
    background-color: rgba(255, 255, 255, 0.5);
    color: #2973ad;
    font-size: 45px;
    text-align: center;
    line-height: 60px;
    cursor: pointer;
}
.day{
    /*display: none;*/
}
.container{
    position: relative;
    width: 420px;
    height: 300px;
    overflow: hidden;
}
.day, .night{
    width: 420px;
    height: 300px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0;
    left: 0;
}
.bg{
    width: 420px;
    height: 300px;
    background-repeat: no-repeat;
    position: absolute;
    top: 0px; 
    left: 0px;
}
.ground{
    width: 418px;
    height: 165px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px; 
    right: 0px;
}
.ground2{
    width: 418px;
    height: 211px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px; 
    right: 0px;
}
.tree1{
    width: 84px;
    height: 104px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px; 
    left: 8px;
}
.tree2{
    width: 53px;
    height: 77px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 82px; 
    left: 145px;
}
.tree3{
    width: 43px;
    height: 60px;
    background-repeat: no-repeat;
    position: absolute;
    top: 89px; 
    right: 25px;
}
.tree4{
    width: 123px;
    height: 138px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px; 
    right: -35px;
}
.house{
    width: 300px;
    height: 136px;
    background-repeat: no-repeat;
    position: absolute;
    bottom: 0px; 
    right: 30px;
}
.moon{
    width: 70px;
    height: 69px;
    background-repeat: no-repeat;
    position: absolute;
   ...

JavaScript

document.getElementById("play").onmouseenter=function(){
TweenMax.to("#play",2,{
        opacity: 0.5
	});
};
document.getElementById("play").onmouseleave=function(){
TweenMax.to("#play",2,{
        opacity: 1
	});
};


document.getElementById("play").onclick=function(){
    TweenMax.to("#play",0.2,{
        scaleX: 0,
        scaleY: 0,
        cursor: 'auto',
        ease: Bounce. easeOut,
	});
    /*scene1*/
    TweenMax.to(".day .moon",2,{
        opacity: 0,   
        delay: 1,
        });
    TweenMax.to(".day .bg",4,{
        x: 420,   
        delay: 1,
        ease: Power1. easeOut,
        });
    TweenMax.to(".day",2,{
        opacity: 0,
        delay: 2,
        });
    TweenMax.to(".night .moon",5,{
        opacity: 1,  
        delay: 1
        });
    TweenMax.from(".moon",3,{
        x: -10,    
        ease: Elastic. easeOut.config( 2, 0.2),
        delay: 1.3,
        });
    TweenMax.from(".sky1",3,{
        x: -10,    
        ease: Elastic. easeOut.config( 2, 0.2),
        delay: 1.4
        });
    TweenMax.from(".sky2",3,{
        x: -10,    
        ease: Elastic. easeOut.config( 2, 0.2),
        delay: 1.2,
        });
    TweenMax.from(".sky3",3,{
        x: -10,    
        ease: Elastic. easeOut.config( 2, 0.2),
        delay: 2.4,
        });
    TweenMax.from(".stars",2,{
        scale: 0, 
        ease: Elastic. easeOut.config( 1, 0.5),
        delay: 1.6,
    });
    /*scene2*/
    TweenMax.to(".night .house",2,{
        y: 70,
        x: 10,
        delay: 3,
    });
    TweenMax.to(".night .tree4",3,{
        y: 125,
        x: 65,
        delay: 3,
    });
    TweenMax.to(".night .ground2",2,{
        scale: 1.1,
        delay: 3,
        y: -10,
        x: -20,
    });
    TweenMax.to(".night .moon, .night .sky1, .night .sky2",2,{
        delay: 3,
        y: -50,
        x: -10,
    });
    TweenMax.to(".night .sky3",2,{
        delay: 3,
        y: -20,
        x: 10,
    });
    TweenMax.to(".night .stars",2,{
       ...