Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <html lang="en">
    <head>
        <title>ASDM</title>
    </head>


    <body id="section1">
    

		<div class="widthHolder">		

			<div id="meters">
				
				<div class="meter">
					<div id="meterHealth"></div>
				</div>
				
				<div class="meter">
					<div id="meterFinance"></div>					
				</div>
				
			</div>
	        
	        <div id="container">
	        
	        
	           
	            <ul id="hud">
					<li id="hudFrame1" class="frame">	            
			            <div class="dialog centerLarge">
			                <h3>Welcome to VETO&ndash;VILLE!</h3>
			                <p cl>VETO-VILLE is a town where violence is becoming a problem. You&#146;ve be brought in as a consultant to help manage this city. Keep businesses and people happy and healthy. Are you ready to help the people of VETO-VILLE?</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">BEGIN</a>
			            </div>
					</li>
					
					<li id="hudFrame2" class="hud frame">	            
			            <div class="dialog centerLarge">
			                <p><img class="inlineRight" src="images-dev/fpoMayor.png" alt="Mayor" />Hi, I&#146;m Mayor Alvin Parker. I&#146;m so glad you&#146;ve come to help us. Let me show you around.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>
			            </div>
					</li>	
					
					<li id="hudFrame3" class="frame">	            
			            <div class="dialog topLeftLarge">
			                <p><img class="right" src="images-dev/fpoMayor.png" alt="Mayor" />We&#146;ve been dealing with violence in our community, that&#146;s why our public health meter is starting to dip.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>
			            </div>
					</li>
					
					<li id="hudFrame4" class="frame">	            
			            <div class="dialog topLeftLarge">
			                <p><img class="inlineRight" src="images-dev/fpoMayor.png" alt="Mayor" />We tried to implement a few violence intervention programs, but resources are tight, and we aren&#146;t seeing any positive outcomes from them yet. Hopefully you can help us find a better way to use our dollars. Let me show you a few problem areas.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>
			            </div>
					</li>															

					<li id="hudFrame5" class="frame">	            
			            <div class="dialog rightSkinny">
							<img class="center" src="images-dev/fpoMayor.png" alt="Mayor" />
							<p>This is a live look at our community. The markers show <span class="orange">violence</span> and things <span class="purple">related</span> to violence.</p>
			                <p>Feel free to explore some of them.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>
			            </div>
					</li>

					<li id="hudFrame6" class="frame">	            
			            <div class="dialog rightSkinny">
							<img class="center" src="images-dev/fpoMayor.png" alt="Mayor" />
							<p>We are seeing violence at home and at school too. Somehow this all feels connected, do you know what I mean?</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>
			            </div>
					</li>

					<li id="hudFrame7" class="frame">	            
			            <div class="dialog rightSkinny">
							<img class="center" src="images-dev/fpoMayor.png" alt="Mayor" />
							<p>Our Businesses are struggling too. We have a big industrial company that is threatening to leave town unless we can find a way to help them financially. Any ideas?</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>
			            </div>
					</li>
					
					<li id="hudFrame8" class="frame">	            
			            <div class="dialog rightSkinny">
							<img class="center" src="images-dev/fpoMayor.png" alt="Mayor" />
							<p>There&#146;s something I need your help with. We&#146;ve got a big decision to make. Let me show you.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>
			            </div>
					</li>	
					
					<li id="hudFrame9" class="frame">	            
			            <div class="dialog rightHalf">
							<p><img class="inlineLeft" src="images-dev/fpoMayor.png" alt="Mayor" />Lieutenant McMurphy is all over me telling me we need more patrol to handle this violence. That means more salary and two new patrol cars! I keep telling him an intervention might be the better way to go. What should we do?</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">> BUY THE PATROL CARS, ADD TO FORCE</a>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">RUN AN INTERVENTION</a>



			            </div>
					</li>	
					
					<li id="hudFrame10" class="frame">	            
			            <div class="dialog rightHalf">
							<p><img class="inlineLeft" src="images-dev/fpoMayor.png" alt="Mayor" />Great, thanks for weighing in. That stings the pocketbook a little, but at least that will get him off my back for now. And hopefully it pays off in the long run.</p>
							<p>There&#146;s another issue I need you input on. I appreciate all this help.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>

			            </div>
					</li>	
					
					<li id="hudFrame11" class="frame">	            
			            <div class="dialog rightHalf">
							<p><img class="inlineLeft" src="images-dev/fpoMayor.png" alt="Mayor" />The paper just ran a story about how St. Thomas is one of the worst hospitals in the state! I need your help with damage control, NOW!</p>
							<p>Our ER is overwhelmed and mortality rates for our town have dipped below the national average. It seems like everyone is getting sick or hurt and I can&#146;t help but think that somehow it&#146;s related to violence.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>

			            </div>
					</li>
					
					<li id="hudFrame12" class="frame">	            
			            <div class="dialog rightHalf">
							<p><img class="inlineRight" src="images-dev/fpoMayor.png" alt="Mayor" />The director of the hospital is promising that if we expand the hospital they will be able to handle more of the trauma, be able to prevent more sickness and we&#146;ll see an improvement in public health.</p>
							<p>The reporter just called and is looking for a statement, should I tell him upgrades are coming?</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">UPGRADE THE HOSPITAL</a>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">SAVE THE MONEY</a>
			                
			            </div>
					</li>	
					
					<li id="hudFrame13" class="frame">	            
			            <div class="dialog rightHalf">
							
							<p><img class="inlineLeft" src="images-dev/fpoMayor.png" alt="Mayor" />Oh man, I hope that was the right move. At least I can work that into next years re-election campaign. Hopefully I can get another term so I can actually fix the problems in this town. I know it won&#146;t be easy.</p>
							<p>Just one last thing, I promise. There’s a big problem with the school system here.</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>

			            </div>
					</li>	
					
					<li id="hudFrame14" class="frame">	            
			            <div class="dialog leftHalf">
							
							<p><img class="inlineRight" src="images-dev/fpoMayor.png" alt="Mayor" />School just started and our superintendent just walked away! Teachers are worn out and tired from all the testing. And these school board meeting are getting intense! Now, I just found out that the state wants to take away our accreditation because of low attendance and poor test scores!</p>
							<p>We can setup a bus program or invest in a bigger education budget by hiring more teachers and getting a new superintendent. Which gives the kids the best shot?</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">KEEP THE SCHOOL OPEN</a>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">SETUP THE BUS PROGRAM</a>			                
		                

			            </div>
					</li>
					
					<li id="hudFrame15" class="frame">	            
			            <div class="dialog leftHalf">
							
							<p><img class="inlineLeft" src="images-dev/fpoMayor.png" alt="Mayor" />You know I think that was the right move. We need some pride in this community and losing school accreditation would have been the nail in the coffin for this town.</p>
							<p>Well that&#146;s it for now. Let&#146;s see how the decisions we made play out over the long run. It&#146;s a good thing the budget year is almost over, we are almost out of cash! Thanks so much for your time!</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">NEXT</a>

			            </div>
					</li>	
					
					<li id="hudFrame16" class="frame">	            
			            <div class="dialog centerLarge">
							
							<h3>Nice Job!</h3>
							<p>How do you think the decisions you made will effect VETO-VILLE over time? Let&#146;s pretend that VETO-VILLE kept making decisions similar to the ones you just made over a 20 year span. Before you hit PLAY, what do you think will happen to the VETO-VILLE community?</p>
			                <a href="javascript:void(0)" class="nextBtn" data-goto="next">PLAY</a>

			            </div>
					</li>																																							
					
	            </ul>
	            
	            <div id="map">
					
					<div id="overlayFrame5" class="frame">
						
						<div class="hotSpot hospital">
							<div class="textBubble">
								<p>Victim treated in ER. Gang activity suspected.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark orange"></div>
						</div>
						
						<div class="hotSpot jail">
							<div class="textBubble">
								<p>Processing a DWI</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>														
						
						<div class="hotSpot park">
							<div class="textBubble">
								<p>Woman is sexually assaulted during her morning run.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark orange"></div>
						</div>	

						<div class="hotSpot cafe">
							<div class="textBubble">
								<p>Employee sexually harassed by customer.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>

						<div class="hotSpot courthouse">
							<div class="textBubble">
								<p>State takes custody during child abuse hearing.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark orange"></div>
						</div>
						
					</div>
	            
					<div id="overlayFrame6" class="frame">
						
						<div class="hotSpot house1">
							<div class="textBubble">
								<p>Elder abuse.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark orange"></div>
						</div>
						
						<div class="hotSpot house2">
							<div class="textBubble">
								<p>Father of a family of four takes his own life.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark orange"></div>
						</div>														
						
						<div class="hotSpot playground">
							<div class="textBubble">
								<p>Kid getting bullied on the playground.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>	
	
						<div class="hotSpot school">
							<div class="textBubble">
								<p>Child expelled for selling drugs at school.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>

					</div>
					
					<div id="overlayFrame7" class="frame">
						
						<div class="hotSpot shop">
							<div class="textBubble">
								<p>Brawl breaks out between disgruntled workers at the auto shop.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark orange"></div>
						</div>
						
						<div class="hotSpot factoryLeft">
							<div class="textBubble">
								<p>Local driver fails drug test. Get&#146;s laid off.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>														
						
						<div class="hotSpot factoryRight">
							<div class="textBubble">
								<p>Three laborers didn&#146;t show up today.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>	


					</div>	
					
					<div id="overlayFrame8" class="frame">
						
						<div class="hotSpot shop">
							<div class="textBubble"><!-- place holder -->
								<p>Brawl breaks out between disgruntled workers at the auto shop.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark orange"></div>
						</div>
						
						<div class="hotSpot factoryLeft">
							<div class="textBubble"><!-- place holder -->
								<p>Local driver fails drug test. Get&#146;s laid off.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>														
						
						<div class="hotSpot factoryRight">
							<div class="textBubble"><!-- place holder -->
								<p>Three laborers didn&#146;t show up today.</p>
								<div class="triangle"></div>
							</div>
							<div class="placeMark purple"></div>
						</div>	


					</div>									
	
	            </div>	            
	            
	            
	            
	            
	        </div>
	        
		</div>

        
    </body>
</html>
              
            
!

CSS

              
                #body {
	background: #ccc;
	margin: 0;
	padding: 0;
	font-size: 12px;
}

* {
	margin: 0;
	padding: 0;
	font-family: "arial";	
}

#map {
	position: relative;
	width:3200px; 
	height:2400px;  
	background-image:url(../images/city.jpg);
	z-index: 1;
}

.widthHolder {
	position: relative;
	margin: 0 auto;
	width: 960px;
}

#test {
	width:500px; 
	height:500px; 
}

#container { 
	position: relative;
	margin:auto;  
	width:960px; 
	height: 550px; 
	background-color:#c3e591;
	border: 1px solid #000;
	overflow: hidden;
	z-index: 1;
	
}

#container ul, #container ul li {
	position: absolute;
	display: block;
	top:0;
	left:0;
	width:960px; 
	height: 550px;	
	z-index: 2;	
	list-style: none;
}

.purple {color:#8443f9;}
.orange {color:#ff4b16;}

#meters {
	position: relative;
	float: left;
	width: 600px;
	height: 60px;
	padding: 0 0 0 10px;
}

.meter {
	position: relative;
	float: left;
	width: 250px;
	height: 40px;
	border:2px solid black;
	margin: 10px 30px 0 0;
}

#meterHealth {
	position: absolute;
	top:0;
	left: 0;
	width: 50%;
	height: 40px;
	background: #e39186;
}

#meterFinance {
	position: absolute;
	top:0;
	left: 0;
	width: 70%;
	height: 40px;	
	background: #88c397;	
}

/* frames */


#map .frame {
	position: absolute;
	top:0;
	left:0;
	width:3200px; 
	height:2400px; 
	z-index: 20;	
	border:1px solid green;
}

/* dialog box tyes */

.dialog {
	background-color:#fff; 	
	box-shadow: 1px 1px 5px #888888; padding:20px;
	border: 1px solid #000;
}



.dialog.centerLarge {
	position:absolute; 
	z-index:30; 
	width: 500px;
	bottom:100px;
	left: 200px;	
}

.dialog.topLeftLarge {
	position:absolute; 
	z-index:30; 
	width: 500px;
	top:20px;
	left: 20px;	
}

.dialog.rightSkinny {
	position:absolute; 
	z-index:30; 
	width: 200px;
	top:20px;
	right: 20px;	
}

.dialog.rightHalf {
	position:absolute; 
	z-index:30; 
	width: 450px;
	top:20px;
	right: 20px;	
}

.dialog.leftHalf {
	position:absolute; 
	z-index:30; 
	width: 450px;
	top:20px;
	left: 20px;	
}


.dialog h3,.dialog a.nextBtn {position:relative; margin:0 auto; width:auto;text-align: center; display: block; clear: both;}
.dialog p {	
	position: relative !important;
	display: block !important;
	font-size: 1.3em;
	line-height: 1.2em !important;
	clear: both;
	text-align: left;
}
.dialog h3, .dialog p {padding: 0 0 20px 0;}
.dialog a {color: #000;padding: 20px 0 0 0;}
.dialog.centerText {text-align: center;}
.dialog.leftText {text-align: center;}


#hud .dialog img {
	position: relative;
	display: block;	
	padding: 0 0 20px 0;
}

#hud .dialog img.inlineRight {
	position: relative;
	float: right;
	display: block;	
	padding: 0 0 20px 20px;	
}

#hud .dialog img.inlineLeft {
	position: relative;
	float: left;
	display: block;	
	padding: 0 20px 20px 0;
}

#hud .dialog img.left {
	float: left;
	clear: both;
}

#hud .dialog img.right {
	float: right;
	clear: both;
}

#hud .dialog img.center {
	position: relative;
	display: block;
	margin: 0 auto;
	clear: both;
}

/* markers */

.hotSpot {
	position: absolute;
	width: auto;
	height: auto;
	z-index: 30;
	background:transparent;
}

.textBubble {
	position: relative;
	width: 310px;
	height: auto;
	padding: 20px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;	
	z-index: 30;
	background: #fff;
	overflow: visible;
	clear: both;
}

.textBubble p {font-size: 1.5em;}

.textBubble .triangle {
	position: absolute;
	width: 65px;
	height: 34px;
	left: 130px;
	bottom:-30px;
	background: transparent url(../images/whiteTriangle.png);
	
}

.hotSpot .placeMark {
	position: relative;
	width: 70px;
	height: 70px;
	clear: both;
	margin: 40px 0 0 125px;	
}

.hotSpot .placeMark.orange {background: url(../images-dev/placeMarkOrange.png);}
.hotSpot .placeMark.purple {background: url(../images-dev/placeMarkPurple.png);}

/* section 1 - tour */

#section1 #overlayFrame5 .hotSpot.hospital {top:689px;left:585px;}
#section1 #overlayFrame5 .hotSpot.jail {top:1200px;left:625px;}
#section1 #overlayFrame5 .hotSpot.cafe {top:1120px;left:1305px;}
#section1 #overlayFrame5 .hotSpot.park {top:900px;left:1200px;}
#section1 #overlayFrame5 .hotSpot.courthouse {top:520px;left:1300px;}

#section1 #overlayFrame6 .hotSpot.house1 {top:220px;left:1930px;}
#section1 #overlayFrame6 .hotSpot.house2 {top:300px;left:2180px;}
#section1 #overlayFrame6 .hotSpot.playground {top:550px;left:2350px;}
#section1 #overlayFrame6 .hotSpot.school {top:750px;left:2150px;}

#section1 #overlayFrame7 .hotSpot.shop {top:1400px;left:1600px;}
#section1 #overlayFrame7 .hotSpot.factoryLeft {top:1960px;left:1800px;}
#section1 #overlayFrame7 .hotSpot.factoryRight {top:2000px;left:2180px;}

#section1 #overlayFrame8 .hotSpot.shop {top:1400px;left:1600px;}
#section1 #overlayFrame8 .hotSpot.factoryLeft {top:1960px;left:1800px;}
#section1 #overlayFrame8 .hotSpot.factoryRight {top:2000px;left:2180px;}


              
            
!

JS

              
                var currentSection = 1;
var currentFrame = 4;


$(document).ready(function(){
	
	/* css fix for cross browser transparency */	
	$(".dialog").fadeTo(0, 0.9);	
	TweenLite.to($("#map"), 0, {x:-1200, y:-850, scaleX:.35, scaleY:.35, ease:"Power4.easeInOut"});
	
	init();	

});

function init() {

	/* fade all frames then load frame 1 - 508, no css display none */
	TweenLite.to($(".frame:visible"), 0, {autoAlpha:0,zIndex:1});	
	TweenLite.to($("#hudFrame"+currentFrame+", #overlayFrame"+currentFrame+""), 1, {autoAlpha:1,zIndex:20, ease:"Power4.easeInOut"});
			

	/* links overlapping? check using for each maybe tp hide LIs ?  */
	$(".nextBtn").on("click",function(event){
		var myObject = $(this);
		nextFrame(myObject);
	});
}

function nextFrame(myObject) {
	
	var nextFrameGoTo = $(myObject).attr("data-goto");
	var prevFrame = currentFrame;
	
	if(nextFrameGoTo == "next") {currentFrame++;} else {currentFrame = parseInt(nextFrameGoTo);}
	
	var nextFrame = currentFrame;	

	loadScene(nextFrame);		

}

function getRandomInt (min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

function loadScene(nextFrame) {

	//TweenLite.to($("#map"), 0, {x:-1200, y:-850, scaleX:.35, scaleY:.35, ease:"Power4.easeInOut"});
	if($("#overlayFrame"+nextFrame+ " .hotSpot").length > 0){
			
			//TweenMax.staggerFromTo($("#overlayFrame"+nextFrame+ " .hotSpot"), 1.5,{autoAlpha:0},{autoAlpha:1},2);
			
TweenLite.to($("#overlayFrame"+nextFrame+ " .hotSpot"), 0, {autoAlpha:0});


			
    TweenMax.staggerTo($("#overlayFrame"+nextFrame+ " .hotSpot"),2,{autoAlpha:1, rotation:180,immediateRender:true, delay:1}, 1);			
/*
		
			var tl = new TimelineMax()
			tl.add(TweenLite.to($(".courthouse"), 1, {autoAlpha:1}));		
			tl.add(TweenLite.to($(".hospital"), 1, {autoAlpha:1,delay:1}));		
			tl.add(TweenLite.to($(".jail"), 1, {autoAlpha:1}));		
			tl.add(TweenLite.to($(".park"), 1, {autoAlpha:1}));		
			tl.add(TweenLite.to($(".cafe"), 1, {autoAlpha:1}));
*/		

	}	

	/* fade out place markers only if not on frame 8 */
	if(nextFrame != 8){	
		TweenLite.to($(".frame:visible"), 1, {autoAlpha:0,zIndex:1, ease:"Power4.easeInOut"});	
		TweenLite.to($("#hudFrame"+nextFrame+", #overlayFrame"+nextFrame), 1, {autoAlpha:1,zIndex:20,delay:1.5, ease:"Power4.easeInOut"});	
	}
		
	switch(nextFrame) {
		case 5:
		
		TweenLite.to($("#map"), 2, {x:-1000, y:-850, scaleX:.5, scaleY:.5, ease:"Power4.easeInOut"});		
		break;
		
		case 6:
		TweenLite.to($("#map"), 2, {x:-1600, y:-600, scaleX:.6, scaleY:.6, ease:"Power4.easeInOut"});		
		break;	
			
		case 7:
		TweenLite.to($("#map"), 2, {x:-1500, y:-1300, scaleX:.55, scaleY:.55, ease:"Power4.easeInOut"});		
		break;			

		case 8:
		TweenLite.to($("#map"), 2, {x:-1500, y:-1300, scaleX:.55, scaleY:.55, ease:"Power4.easeInOut"});
		//TweenLite.to($("#overlayFrame"+nextFrame+ " .hotSpot .textBubble"), 0, {autoAlpha:0});
		var lastFrame = nextFrame-1;
		TweenLite.to($("#hudFrame"+lastFrame+", #overlayFrame"+lastFrame+" .textBubble"), 1, {autoAlpha:0,zIndex:1, ease:"Power4.easeInOut"});	
		TweenLite.to($("#hudFrame"+nextFrame+""), 1, {autoAlpha:1,zIndex:20,delay:1.5, ease:"Power4.easeInOut"});	
		
		break;	
		
		case 9:
		TweenLite.to($("#map"), 2, {x:-900, y:-1200, scaleX:.7, scaleY:.7, ease:"Power4.easeInOut"});
		break;	
		
		case 10:
		TweenLite.to($("#meterFinance"), 1, {width:"50%", ease:"Power4.easeInOut"});
		break;	
				
		case 11:
		TweenLite.to($("#map"), 2, {x:-600, y:-550, scaleX:.7, scaleY:.7, ease:"Power4.easeInOut"});
		break;	
		
		case 13:
		TweenLite.to($("#meterHealth"), 1, {width:"70%", ease:"Power4.easeInOut"});
		break;	
				
		case 14:
		TweenLite.to($("#map"), 2, {x:-1400, y:-800, scaleX:.7, scaleY:.7, ease:"Power4.easeInOut"});
		break;			

		case 15:
		TweenLite.to($("#meterFinance"), 1, {width:"20%", ease:"Power4.easeInOut"});
		break;	
		
		case 16:
		TweenLite.to($("#map"), 2, {x:-1200, y:-850, scaleX:.35, scaleY:.35, ease:"Power4.easeInOut"});
		break;							
		
						
	}
}






              
            
!
999px

Console