<div id='floor'></div>
<span id="autumn">Falling of the last Leaf...</span>
<div id="tree"></div>
<div id="leaf"></div>
<span id="spring">but , there's always Spring and Hope...</span>

@import url(https://fonts.googleapis.com/css?family=Oswald);

body {  background-color: #333; margin:0; padding:5px; overflow:hidden; }
#tree {
  width:530px;  height:600px;  position:absolute;
  top:-140px; left:-200px;
  background: url(http://kineme.net/files/Forum/2009/09/theGreatTree_theGreatTree_2.png);
  background-size: 100% 100%;
}
#tree:before{
	content: "";
	position: absolute;	width: 400px;	height: 50px;	bottom:-30px;	left:100px;
  border-radius:50%;  box-shadow: 0px 0px 30px black;
  background:black; opacity:0.1;
}
#leaf {  width:50px; height:40px;  position:absolute; top:10px; left:20px; }
#leaf:before{
	content: "";
	position: absolute;	width: 100%;	height: 100%;	top:0;	left:0;
	background: url(http://www.clipartqueen.com/image-files/red-lobed-fall-clipart-leaf.png);
  background-size: 100% 100%;
	-webkit-transform: rotate(180deg);
	-moz-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	transform: rotate(180deg);
}
#autumn{
  color:BLACK;  opacity:0.5;  font-family:'Oswald', arial; 
  font-size:50px; font-size:10vw;
}
#spring{
  position:absolute;  color:white;  font-family:arial; 
  font-size:20px;  bottom:120px; left:30px;
}
#floor{
  position:absolute;
  background-color:rgba(0,0,0,0.2);
  left:0px; bottom:0px;
  width:100%;height:200px;
}


#DiacoDesignLink,#pens{
  color: #fff;
}

/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */
var Leaf = document.getElementById('leaf') , 
mySplitText = new SplitText("#spring", {type:"chars"}),
Path1 = [{x:0,y:0},{x:0,y:0},{x:0,y:21.5},{x:1,y:38},{x:5,y:88},{x:70,y:142},{x:145,y:165},{x:230,y:190},{x:330,y:195},{x:360,y:170}] ,
Path2 = [{x:360,y:170},{x:330,y:195},{x:0,y:320},{x:40,y:220},{x:60,y:150},{x:230,y:350},{x:313,y:310}] ,
Path3 = [{x:313,y:310},{x:230,y:350},{x:145,y:372},{x:65,y:355}] ,
Path4 = [{x:65,y:355},{x:145,y:372},{x:205,y:425},{x:250,y:403}] ,
Path5 = [{x:250,y:403},{x:205,y:425},{x:215,y:430},{x:185,y:440},{x:160,y:447},{x:128,y:450},{x:127,y:450}] ,
tl = new TimelineMax({delay:2,onComplete:function(){tl2.play()}});

TweenLite.set(Leaf,{rotation:90});
tl.add(function(){tl.timeScale(2.5)})
.to(Leaf,4,{bezier:{type:"cubic",values:Path1,autoRotate:true},ease:Sine.easeInOut})
.fromTo(Leaf,8,{scale:1,immediateRender:false},{bezier:{type:"cubic",values:Path2,autoRotate:true},ease:Sine.easeInOut})
.fromTo(Leaf,3,{scale:-1},{bezier:{type:"cubic",values:Path3,autoRotate:true},ease:Sine.easeInOut})
.fromTo(Leaf,3,{scale:1},{bezier:{type:"cubic",values:Path4,autoRotate:true},ease:Sine.easeInOut})
.fromTo(Leaf,2,{scale:-1},{bezier:{type:"cubic",values:Path5,autoRotate:true},ease:Sine.easeInOut})
.to(Leaf,22,{rotationX:770},0)
.add(function(){tl.timeScale(1)},"wind")
.to(Leaf,1,{rotationY:90,rotationX:360,opacity:0,x:500,y:'-=50',ease:Sine.easeIn},'wind+=1')
.staggerFrom(mySplitText.chars,0.5,{x:-100,opacity:0},0.03,'wind+=1')
/* a Pen by Diaco m.lotfollahi  : https://diacodesign.com */