Animations at the same time

[jonny_max]

Somebody help me, please.

I need frase and image start to appear at the same time.

var $farse1 = $("#farse1");
$farse1.html( $farse1.html().replace(/./g, "<span>$&</span>").replace(/\s/g, " "));

var tl = new TimelineMax({alpha:0, repeatDelay:1, repeat:-1});
//var tl = new TimelineMax(); 


//start slide 1
tl.addLabel("end")


 .set( $farse1, {display:'block'},"end" )
 .set( $img1, {display:'block'},"end" )


 .addLabel("end")


 .staggerFromTo( $img1, 0.5, {top:"150px"}, {top:"20px"} )
 .staggerFromTo( $farse1.find("span"), 0.1, {autoAlpha:0}, {autoAlpha:1}, 0.1 )


 .addLabel("end")


 .to( $farse1, 1, {autoAlpha:0},"end" )
 .to( $img1, 1, {autoAlpha:0},"end" )


 .addLabel("end")


 .set( $farse1, {display:'none'},"end" )
 .set( $img1, {display:'none'},"end" );
//end slide 1

 

[jonny_max]

I don't know why, but this works wrong
 

				//start slide 1
				tl.addLabel("end")
				  
				  .set( $farse1, {display:'block'},"end" )
				  .set( $img1, {display:'block'},"end" )
				  
				  .addLabel("end")
				  
				  .staggerFromTo( $img1, 0.5, {top:"150px"}, {top:"20px"},"end" );
				
				var i=0;
				$farse1.find("span").each(function(){
					tl.staggerFromTo( this, 0.1, {autoAlpha:0}, {autoAlpha:1,delay:0.1*i},"end" );
					i=i+1;
				});
				
				tl.addLabel("end")
				  
				  .to( $farse1, 1, {autoAlpha:0},"end" )
				  .to( $img1, 1, {autoAlpha:0},"end" )
				  
				  .addLabel("end")
				  
				  .set( $farse1, {display:'none'},"end" )
				  .set( $img1, {display:'none'},"end" );
				//end slide 1

the same story

				var tl = new TimelineMax({alpha:0, repeatDelay:1, repeat:-1});
				//var tl = new TimelineMax();				
				
				//start slide 1
				tl.addLabel("end")
				  
				  .set( $farse1, {display:'block'},"end" )
				  .set( $img1, {display:'block'},"end" )
				  
				  .addLabel("end")
				  
				  .staggerFromTo( $img1, 0.5, {top:"150px"}, {top:"20px"},"end" );
				
				var i=0;
				$farse1.find("span").each(function(){
					tl.staggerFromTo( this, 0.1, {autoAlpha:0}, {autoAlpha:1},"end+=" + i*0.1 );
					i=i+1;
				});
				
				tl.addLabel("end")
				  
				  .to( $farse1, 1, {autoAlpha:0},"end" )
				  .to( $img1, 1, {autoAlpha:0},"end" )
				  
				  .addLabel("end")
				  
				  .set( $farse1, {display:'none'},"end" )
				  .set( $img1, {display:'none'},"end" );
				//end slide 1

[jonny_max]

answer: 

				var tl = new TimelineMax({alpha:0, repeatDelay:1, repeat:-1});
				//var tl = new TimelineMax();				
				
				//start slide 1
				tl.addLabel("end")
				  
				  .set( $farse1, {display:'block'},"end" )
				  .set( $img1, {display:'block'},"end" )
				  
				  .addLabel("end")
				  
				  .staggerFromTo( $img1, 0.5, {top:"150px"}, {top:"20px"},"end" );
				
				var i=0;
				$farse1.find("span").each(function(){
					tl.fromTo( this, 0.1, {autoAlpha:0}, {autoAlpha:1},"end+=" + i*0.1 );
					i=i+1;
				});
				
				tl.addLabel("end")
				  
				  .to( $farse1, 1, {autoAlpha:0},"end" )
				  .to( $img1, 1, {autoAlpha:0},"end" )
				  
				  .addLabel("end")
				  
				  .set( $farse1, {display:'none'},"end" )
				  .set( $img1, {display:'none'},"end" );
				//end slide 1