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

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

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