Jump to content
Search Community

Restart animation but only to a certain frame

Guest yolassi
Moderator Tag

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Guest yolassi

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 comment
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 comment
Share on other sites

  • Solution

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 comment
Share on other sites

Guest yolassi

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 comment
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.
×
×
  • Create New...