cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

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.

            
              <div id="animaton">
	<div id="stage">
    
		<div class="location" id="street">
			<span>Street Element</span>
		</div>

		<div class="location" id="store">
			<span>Store Element</span>
		</div>

		<div class="location" id="bank">
			<span>Bank Element</span>
		</div>
    
	</div>

	<div id="info"></div>
  
</div>


[[[http://codepen.io/davestewart/pen/itCkj]]]


            
          
!
            
              /* layout */
body{
  width:800px;
  font:12px normal "Arial", sans-serif;
}

#stage {
  position:relative;
  height:200px;
  background-color:black;
  border:4px solid #000;
}
    
#info{
  padding:4px 6px;
  background:#000;
  color:#FFF;
  }

/* elements */
.location {
  width:100%;
  height:100%;
  position:absolute;
  background-position:center center;
  font-size:20px;
  z-index:0;
    
  span{
    position:absolute;
    display:inline-block;
    left:10px;
    top:10px;
    padding:5px 9px;
    background:#000;
    color:#FFF;
  }
}

$url:'http://www.davestewart.co.uk/temp/gsap/locations/';
    
#street { 
  background-image:url($url + 'street.png');
}

#store { 
  background-image:url($url + 'store.png');
  span{
    top:50px;
    }
}

#bank { 
  background-image:url($url + 'bank.png');
  span{
    top:90px;
    }
}
            
          
!
            
              // event handlers
	function onStart()
	{
    $('#info').text('Starting: ' + this.vars.name);
	}

// functions
	function timeline(id)
	{
   	// variables
   		++zIndex;
			var slide = id;
			var title = $(id).find('span');
   		var name = 'scene ' + zIndex + ' (' +id.replace('#', '')+ ')';
			var props = {name:name, onStart:onStart};
			var tl = new TimelineLite(props);
    
   	// set main timeline label
   		tlMain.addLabel(name);
    
   	// animate
   		tl
      
      		//pop slide to top of stack and set transparent
      		.set(slide, {zIndex:zIndex, autoAlpha:0, immediateRender:false})
      
      		// reset title
      		.set(title, {left:10, immediateRender:false})
      
      		// fade in
      		.to(slide, 0.5, {autoAlpha:1})
    
   			// animate title
				.to(title, 1, {left:200});
      
      // return
			return tl;
	}

// variables
	var zIndex = 0;
	var tlMain = new TimelineMax({name:'main'});

// preemptively set all timelines to 0 z-index and 0 alpha
	TweenMax.set($('.slide'), {zIndex:0, autoAlpha:0})

// animation, round 1
   tlMain.add(timeline('#street'));
	tlMain.add(timeline('#store'));
	tlMain.add(timeline('#bank'));

// animation, round 2
   tlMain.add(timeline('#street'));
	tlMain.add(timeline('#store'));
	tlMain.add(timeline('#bank'));

// controller
	Controller.init(tlMain);
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console