Jump to content
Search Community

repeat / repeatdelay

Juc1 test
Moderator Tag

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

Hi all,

 

Suppose my timeline has various events adding up to say 12 seconds - to wait 8 seconds after the last event and then begin the timeline again. I can use 

var tl1 = new TimelineMax({repeat: -1, repeatDelay: 8}),

but can I instead say something like "run the timeline every 20 seconds" so suppose the timeline is 12 seconds long it would run at seconds 0 -12 then again at 20 - 32 then 40 - 52, then 60 - 72 etc

 

 

Thanks...

See the Pen EgjpYa by Juc1 (@Juc1) on CodePen

Link to comment
Share on other sites

There isn't anything in the API like {repeatInterval:3} but there are ways to do this.

 

If you want to repeat your timeline every 3 seconds you can subtract the duration of your timeline from 3 and set that dynamically as the repeatDelay like:

 

//green element using dynamic repeatDelay
//extremely precise


var interval = 3;
var dynamicRepeat = new TimelineMax({repeat:-1});
dynamicRepeat.to(".green", 1, {y:200})
.to(".green", 0.25, {opacity:0})


//set repeatDelay based on your interval value (3) - duration of the timeline
dynamicRepeat.repeatDelay(interval - dynamicRepeat.duration())


console.log(dynamicRepeat.duration() + " + " + dynamicRepeat.repeatDelay() + " = " + interval)

Or you can use a delayedCall to call a function every 3 seconds like:

 

//orange element using delayedCall()
//not as accurate as function calls take time

var interval = 3;
var tl = new TimelineMax({});
tl.to(".orange", 1, {y:200})
.to(".orange", 0.25, {opacity:0})


function repeatOrange() {
  tl.restart();
  TweenLite.delayedCall(interval, repeatOrange);
}


TweenLite.delayedCall(interval, repeatOrange)

demo with both versions: http://codepen.io/GreenSock/pen/BLjoGP?editors=0011

 

 

  • Like 2
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...