Jump to content
GreenSock

Learning

Passing variable into timeline via play?

Go to solution Solved by Rodrigo,

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 guys, another timeline question!

 

If I have a timeline t1 where some tweens have a delay of 1 second. Am I able to dynamically control this 1 second by passing it in when I'm about to play the timeline again?

I.e. something like play( delayVar = 1 ) or play( delayVar = 2 ) depending on my needs?
Or the numbers in the timeline is fixed upon the creation of the timeline?

 

Many thanks in advance!

Link to comment
Share on other sites

Hi,

 

Without seeing a live sample I would go with shiftChildren(). All you need to know is where the first instance you want to change sits on the timeline, in order to affect the start time of all the instances from that point until the end of the timeline.

 

http://greensock.com/docs/#/HTML5/GSAP/TimelineLite/shiftChildren/

 

There could be some other ways to do this, such as using a function to create and populate the timeline and passing a value to change the delay of the specific instances. 

 

Also is important to know if all your tweens are in straight sequence or if there's some overlaping or staggering between them.

 

As you can see we could keep discussing about different ways to do this, so if you could provide a reduce live sample that is as closest as possible to your real app, it would be great.

  • Like 2
Link to comment
Share on other sites

The shiftChildren() thing could totally work. If it were me, though, I'd probably wrap those particular child tweens in their own timeline, and place that timeline onto your original timeline (nest them). Then, you can easily move that whole chunk around wherever you want using its startTime(). For example, let's say you want them to have an initial delay of 1 second (pseudo code):

var master = new TimelineLite(); 
var child = new TimelineLite();
child.to(...).to(...); //add whatever tweens you want, however you want.
//the next line is the key - you just place it into the master where you want (1 second in this case)
master.add(child, 1);
console.log(child.startTime()); //"1"
//then later, if you want to shift it so that it acts like it starts at 2 seconds...
child.startTime(2); 

You could, of course, do that to each of your tweens instead of wrapping them in a timeline but I just think it's a lot more convenient to leverage the power of nested timelines for total control. It's kinda the whole point of timelines (allowing you to group things intuitively)

 

If you haven't read/watched these already, I'd highly recommend them:

http://greensock.com/sequence-video

http://greensock.com/position-parameter

 

Happy tweening!

  • Like 2
Link to comment
Share on other sites

Hmm... The closest example I can think of is this,

 

var t1 = new TimelineMax({ paused: true });

t1.to( '#scene-1', 1, { autoAlpha: 0 },0 );

 

If I have two buttons,

one to play t1 immediately.

one to play t1 after a 3-second delay.

 

How should I add this variable delay into my timeline?

Link to comment
Share on other sites

  • Solution

Well if you want to delay the start of the entire timeline and not just a few tweens in it, you could use shiftChildren(), although after you used it you'll have to remove that time if te user clicks on the button to play it immediately.

 

Another option is to create a function and pass a time parameter and use a delayed call to start the timeline:

var tl = new TimelineLite();

function startTl(delay){
  
  TweenLite.delayedCall(delay, function(){tl.play();});

}

And with the other button just use tl.play()

  • Like 5
Link to comment
Share on other sites

delayedCall seems to be the ideal way to do this!

I've been trying to use a javascript timer to play, but I'm not sure if it's because of clearing timer or overlapping timer, there's a lot of problems. Argh.

Thanks!

Link to comment
Share on other sites

ok, it seemed from the first post that you wanted to move tweens in a timeline, but now it looks like you just want to delay the start.

 

delayedCall() sounds good but depending on your needs adding a dynamic delay may work too like:

 

var tl = new TimelineLite({paused:true});


tl.to(".green", 1, {y:100})
  .to(".orange", 1, {y:100});


document.getElementById("restartNow").onclick = function() {
  tl.restart(); //restart and ignore delays 
}


document.getElementById("restartWithDelay").onclick = function() {
  tl.delay(1).restart(true); // add 1-second delay and honor that delay when restarting
}

http://codepen.io/GreenSock/pen/grjYxJ?editors=0010

 

*note tl.delay(1).restart(true); will immediately place the playhead at time(0) and then start moving forward 1-second later. 

  • Like 6
Link to comment
Share on other sites

@Carl So technically you can also chain t1.delay(1).play(4), etc? Nice!

Link to comment
Share on other sites

t1.delay(1).play(4)

will give the timeline a delay of 1 second but play(4) says jump immediately to 4 seconds. the timeline isn't going to wait 1 second before jumping to a time of 4.

  • Like 1
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.
×