Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Guest yolassi

Restart animation but only to a certain frame

Recommended Posts

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!!
Link to post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

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! 

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×