burger ad

by John Doe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
<div class="container">
    <div class="circle"></div>
    <div class="mobil">
        <div class="search"></div>
        <div class="search_area">
            <span>B</span>
            <span>U</span>
            <span>R</span>
            <span>G</span>
            <span>E</span>
            <span>R</span>
        </div>
    </div>
    <div class="mobil two"></div>
    <div class="found"></div>
    <div class="circletwo"></div>
    <div class="scenetwo">
        <div class="restaurant"></div>
        <div class="burger">
            <div class="burger6"></div>
            <div class="burger5"></div>
            <div class="burger4"></div>
            <div class="burger3"></div>
            <div class="burger2"></div>
            <div class="burger1"></div>
        </div>    
        <div class="plate"></div>
        <div class="board"></div>
    </div>
    <div class="cover"></div>
</div>

CSS

.container{
    position: relative;
    height: 200px;
    width: 180px;
    overflow: hidden;
}
.cover{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 99px;
    width: 167px;
    background-image: url('http://kalu.16mb.com/public_html/burger/cover.png');
    background-repeat: no-repeat;
}
.circle, .circletwo{
    position: absolute;
    bottom: 0px;
    left: 0px;
    height: 166px;
    width: 165px;
    background-image: url('http://kalu.16mb.com/public_html/burger/circle.png');
    background-repeat: no-repeat;
}
.circletwo{
    opacity: 0;
}
.mobil{
    position: absolute;
    bottom: 0px;;
    left: 8px;
    height: 188px;
    width: 130px;
    background-image: url('http://kalu.16mb.com/public_html/burger/mobil.png');
    background-repeat: no-repeat;
}
.mobil.two{
    opacity: 0;
    background-image: url('http://kalu.16mb.com/public_html/burger/mobil2.png');
}
.search{
    position: absolute;
    top: 50px;
    left: 56px;
    width: 44px;
    height: 46px;
    background-image: url('http://kalu.16mb.com/public_html/burger/searchicon.png');
    background-repeat: no-repeat; 
}
.search_area{
    position: absolute;
    top: 23px;
    left: 51px;
    width: 48px;
    height: 14px;
    display: block;
    background-color: #f48047;
    border-radius: 20px;
    color: #ffffff;
    font-family: sans-serif;
    font-weight: bold;
    font-size: 11px;
    padding: 2px 0 2px 5px;
    overflow: hidden;
}
.found{
    position: absolute;
    top: 63px;
    left: 64px;
    width: 37px;
    height: 37px;
    background-color: #E0F2F2;
    border-radius: 50%;
    opacity: 0;
}
.search_area span{
    margin-right: -3px;
}
.scenetwo{
    opacity: 0;
    position: absolute;
}
.restaurant{
    position: absolute;
    top: 9px;
    left: 18px;
    width: 130px;
    height: 190px;
    background-image: url('http://kalu.16mb.com/public_html/burger/restaurant.png');
    background-repeat: no-repeat; 
}
.burger{
    position: absolute;
    top: 77px;
   ...

JavaScript

TweenMax.from(".circle",0.8,{
        scaleX: 0,
    	scaleY: 0,
    	delay: 1,
    	ease: Power3. easeOut,
	});
TweenMax.from(".mobil",1.4,{
        bottom: -200,
    	delay: 1.8,
    	ease: Power3. easeOut
	});
TweenMax.from(".search",0.8,{
        opacity: 0,
    	delay: 3.2,
    	ease: Sine. easeOut,
	});
TweenMax.from(".search_area",1,{
        opacity: 0,
    	delay: 3.2,
    	ease: Sine. easeOut,
	}); 
TweenMax.from(".search_area",0.8,{
        width: 13,
    	left: 66,
    	delay: 3.2,	
    	ease: Sine. easeOut,
	});
TweenMax.staggerFrom(".search_area span",0.1,{
    opacity: 0,
    delay: 4.6,
}, 0.4);
TweenMax.to(".search",0.2,{
        scaleX: 0.9,
        scaleY: 0.9,
    	opacity: 0.8,
    	delay: 8,	
});
TweenMax.to(".search",0.2,{
        scaleX: 1,
    	scaleY: 1,
    	opacity: 1,
    	delay: 8.2,	
});
TweenMax.to(".search",0.2,{
    	opacity: 0,
    	delay: 8.4,	
});
TweenMax.to(".search_area",0.2,{
    	opacity: 0,
    	delay: 8.4,	
});
TweenMax.to(".found",0.2,{
    	opacity: 1,
    	delay: 8.4,	
});
TweenMax.from(".found",0.2,{
    	scaleX: 0,
    	scaleY: 0,
    	delay: 8.4,	
});
TweenMax.to(".found",0.2,{
    	opacity: 0,
    	delay: 8.6,	
});
TweenMax.to(".mobil.two",0.2,{
        opacity: 1,
        delay: 8.6/* 6.8*/, 
});
TweenMax.to(".mobil",1,{
        scaleX:1.57,
        scaleY: 1.57,
        bottom: -53,
        left: -4,
        delay: 9.8 /* 7.5,*/ ,
});
TweenMax.to(".mobil",1.5,{
        opacity: 0,
        delay: 10.8 /* 7.5,*/ , 
});
TweenMax.to(".scenetwo",1.5,{
        opacity: 1,
        delay: 10.8/* 7.6*/,
});
TweenMax.to(".cover",0,{
        opacity: 0,
        delay: 11.5,
});
/*moving open sign*/
TweenMax.to(".board",0.3,{
        rotation:"0.10",
        delay: 12/* 7.6*/,
});
TweenMax.to(".board",0.4,{
        rotation:"-0.9",
        delay: 12.3/* 7.9*/,
});
TweenMax.to(".board",0.4,{
        rotation:"0.7rad",
        delay: 12.7/* 8.5*/,
});
TweenMax.to(".board",0.5,{
        rotation:"-0.6rad",
        delay:...