hola! alguien me puede ayudar con lo sgte: estoy tratando de emular lo que se puede ver en este enlace: [url]http://www.wix.com/pvegamil/eavega-1[/url] esta hecho en formato flash y quise emular los efectos de transicion del contenido con extjs, he aqui mi version en extjs: [url]http://www.tokkaido.cl/evega/[/url] como podran ver solo pude hacer una especie de scroll, pero cuando selecciono una seccion está toma su nueva ubicacion y me gustaria que volviese a su posicion original pero no he podido hacerlo, he intentado varias cosas pero no me resulta. he aqui mi codigo: archivo js

 Ext.ns('efectos');
 
 efectos.Fx = {
	
	init:function(){
		
		var contenido = Ext.get('contenido');
		contenido.center();
		
		var titulo = Ext.get('titulo');
		titulo.setVisible(true);
		titulo.slideIn('t',{easing: 'easeOut',duration: 2});
		
		var img_head = Ext.get('fotohead');
		img_head.fadeIn({duration:3});
	
		var contenidos = Ext.DomQuery.select('[class=secciones]');
		
		Ext.each(contenidos,function(item,i){
			
			Ext.fly(item).setOpacity(0);
			
		});
	
		var el_actual = Ext.get('presentacion');
		el_actual.shift({x:185,opacity:1,duration:2});		
	
		el_actual.setVisible(true);
	
		Ext.get('btn_presentacion').on('click',function(){
		
			botones('btn_presentacion');
			
			efecto('presentacion',el_actual);
		
		});  
		
		Ext.get('btn_trayectoria').on('click',function(){ 
			
			botones('btn_trayectoria');
			
			efecto('trayectoria',el_actual);
			
		});  
		
		Ext.get('btn_servicios').on('click',function(){
			botones('btn_servicios');
			efecto('servicios',el_actual);
	
		});
		
		Ext.get('btn_clientes').on('click',function(){
			botones('btn_clientes');
			efecto('clientes',el_actual);
	
		});
		
		Ext.get('btn_contacto').on('click',function(){ 
		
			botones('btn_contacto');
			efecto('contacto',el_actual);
	
		});
		function botones(boton){
			
			var items = Ext.DomQuery.select('[class=boton]');
			
			Ext.each(items,function(item,i){
			
				Ext.fly(item).applyStyles('color:white');
			
			}); 
			btn = Ext.get(boton);
			
			btn.applyStyles('color:red')
	
		};
		
		function efecto(elemento,el_anterior){
			
			el_actual = Ext.get(elemento);
			
			if (el_actual==el_anterior){return};
			el_anterior.shift({x:-100,opacity:0,duration:2});
			el_actual.shift({x:185,opacity:.85,duration:3});
		}
	
	}
 
 }
 
 Ext.onReady(efectos.Fx.init,efectos.Fx);

archivo css

body{
	background-color: #333333;
	font-family: Arial;
	font-size: smaller;
}
#contenido{
	background-color: white;
	height: 680px;
	width: 960px;
	z-index: 0;
}
#titulo{
	font-size:15px;
	color:white;
	background-color:#ff9900;
	position:absolute;
	top:10px;
	left:0px;
	width: 400px;
	height: 30px;
	padding:10px;
	visibility: hidden;
	z-index: 90;
}
#fotohead img{
	width:100%;
}
#menu{
	position: absolute;
	background-color: #ff9900;
	height: 40px;
	width:960px;
	top: 220px;
	z-index: 100;
	color: white;
	padding-top: 15px;
	
}
#menu li{
	display: inline;
	padding-left: 70px;
	font-weight: bold;
}
#menu ul li:hover a {color:#fff; background: #956100;}
.boton{
	cursor:pointer;
}
.secciones{
	position: absolute;
	top:300px;
	left:1200px;
	width:900px;
	height:330px;
	margin:0px;
	background-color: white;
	padding:5px;
	z-index: 10;
}
#presentacion img{
	position: absolute;
	left: 60%;
}
#presentacion h1{
	position: absolute;
	left: 10px;
}
#presentacion p{
	position: absolute;
	top:50px;
	left:10px;
	font-weight: normal;
	width:50%;
}
#trayectoria img{
	position: absolute;
	width:100%;
	height: 40%;
}
#trayectoria h1{
	position: absolute;
	top:45%;
	left: 10px;
}
#trayectoria ul{
	position: absolute;
	top:55%;
	left:10px;
	font-weight: normal;
}
#trayectoria li{
	padding-top:10px;
}
#servicios img{
	position: absolute;
	left: 60%;
}
#servicios ul{
	position: absolute;
	list-style: square;
	width:50%;
	left:10px;
}
#servicios li{
	padding-top: 10px;
}
#clientes img{
	position: absolute;
	left: 60%;
}
#datos{
	position: absolute;
	top:20%;
	left:10%;
}
#formulario{
	position: absolute;
	top:20%;
	left:50%;
}