Restart animation but only to a certain frame

[yolassi 0 Likes (Newbie)]

Hi there. I've been searching on this site and haven't been able to find anything to solve my problem but I should mention I'm no expert. I've been working on banner ads (was used to working with Flash but now using HTML5) and I want to be able to make the banners repeat but ONLY TO A CERTAIN POINT. I've attached some very simplified code to give an idea of what I'm talking about. I'm using 'restart' to repeat the banner but I want the animation to only repeat once and to stop at a certain point in the case below I want it to stop where the cta fades in, i.e., the third to last line of the timline lite. Here's the code:

 

var tl = new TimelineLite({onComplete:bannerRestart});

tl.to(copy1, .5, {alpha:1, ease:Linear.easeNone},"+=.7")

.to(copy1, .3, {alpha:0, ease:Linear.easeNone},"+=2.5")

.to(copy2, .5, {alpha:1, ease:Linear.easeNone},"+=.3")

.to(cta, .5, {alpha:1, ease:Linear.easeNone},"+=1")

.to(copy2, .3, {alpha:0, ease:Linear.easeNone},"+=2.5")

.to(cta, .5, {alpha:0, ease:Linear.easeNone},"-=.3")

 

function bannerRestart() {

    tl.restart();

}

 

If anyone could help I'd be very thankful!!

[Diaco 1,948 Likes (Superhero)]

Hi yolassi 

 

pls try like this :

 

var tl = new TimelineMax({onComplete:function(){
  // this.play(1); // play from time 1
  // or
  this.play('blue'); // play from Label 'blue'
  // or
  //this.seek(1); // jump to time 1 and play
}});

tl.to('.red',1,{x:100})
  .to('.blue',1,{x:100},'blue');

you can use .tweenTo() and .tweenFromTo() methods too , something like this :

var R=1;
var tl = new TimelineMax({onComplete:function(){
  if ( R ){ this.tweenFromTo("blue",2);  R=0;  }
}});

tl.to('.red',1,{x:100},'red')
  .to('.blue',1,{x:100},'blue');

See the Pen zvOXRw by MAW (@MAW) on CodePen

[Carl 9,066 Likes (Superhero)]

i think this answer should help too:

 

http://greensock.com/forums/topic/12238-repeating-timeline-question/?hl=checkplaycount#entry50545

 

in your case, just add the call() method where you want the timeline to stop.

 

In the future please try to make a CodePen demo as it makes it much easier for us to understand your code

http://greensock.com/forums/topic/9002-read-this-first-how-to-create-a-codepen-demo/

 

Thanks.

[yolassi 0 Likes (Newbie)]

Thanks you so much! This works perfectly. Glad to see that you have a forum specifically for banner ads too. Oh my what a quick changes this has been but greensock really helps!