Restarting and added timeline?

[dada78 31 Likes (Newbie)]

Hi guys,

 

I have the following timeline that I wish to insert into another timeline:

var maintl = new TimelineLite();
var shaketl = new TimelineLite();
shaketl.fromTo(this.phoneImg, 0.08, {scaleX:1, scaleY:1, rotation:4}, {scaleX:1.1, scaleY:1.1, rotation:-4, yoyo:true, repeat:10})

maintl.add(shaketl)
//followed by a few animations here  

After which I would like to insert the "shaketl" again restarting it.

How would I accomplish this?

 

Thanks!

[Diaco 1,948 Likes (Superhero)]

Hi dada78 

 

if i understood correctly ; pls check this out : 

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

 

you can get timelines/tweens duration with .duration() method :

http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/duration/

 

and use .shiftChildren() method to shifts the startTime of the timeline's children by a certain amount :

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

[dada78 31 Likes (Newbie)]

Thanks Diaco,

but all I would like to do is simply "restart" the shaketl timeline instance whenever I add it inside the maintl timeline instance.

 

For example I have the following: First I add the shake timeline instance followed by a few other tweens...

 maintl.add(shaketl)

.to(element, 0.2, {alpha:1}, "middle")
.to(element, 0.2, {alpha:1}, "middle")

//then when I add it again it doesn't play because the starting values haven't been reset.

.add(shaketl) //the second time it doesn't animate because it's not been reset

How can I accomplish this?

Thanks!

[Carl 9,066 Likes (Superhero)]

Thanks for the demo, Diaco. very helpful.

 

Hi Dada78,

 

In this fork of Diaco's demo the childTL will get added to the end of the masterTL (and play) each time you click the blue box.

 

notice I'm just adding the child in it's restarted state:

MasterTl.add(childTl.restart());

Which is similar to what Diaco was doing when shifting it.

 

Is that what you need?

[Diaco 1,948 Likes (Superhero)]

in addition to Carl's great advice , you can use a function to return child timeline too , like this :

function shaketl(){   
var tl = new TimelineLite();
    shaketl.fromTo(this.phoneImg, 0.08, {scaleX:1, scaleY:1, rotation:4}, {scaleX:1.1, scaleY:1.1, rotation:-4, yoyo:true, repeat:10});

    return tl;
};

MasterTl
.add( shaketl() )
.to(...,1,{...})
.to(...,1,{...})
.add( shaketl() )

[celli 69 Likes (Contributor)]

The shiftChildren method sounds really useful! I see the docs here http://greensock.com/docs/#/HTML5/GSAP/TimelineMax/shiftChildren/

Is there a codePen somewhere that uses it to see an example of how exactly it works, maybe in a master-timeline with a few separate timelines? I am trying to envision how this works, and it sounds like it is something that is VERY useful!

[Carl 9,066 Likes (Superhero)]

HI Celli,

 

Take a look at Diaco's demo. It's a great example of how shiftChildren() can be used. 

Notice how when the animation first plays only the red box moves. masterTL only has tweens for the red box. 

When you click the blue box the childTL (which shakes the blue box) happens first and the tweens for the red box get shifted forward so that they happen after the blue box shakes. 

MasterTl.pause(0).shiftChildren(childTl.duration()).add(childTl,0).restart();

Diaco's code basically says: pause the MasterTL at the beginning, move all the existing tweens forward in time based on the duration of childTL (blue box shake) and then add childTL at the beginning (time of 0), and then restart MasterTL. It's amazing what one line of code can do

[dada78 31 Likes (Newbie)]

For some reason I can't wrap my head around this (frustrating).

 

So I created a codepen to illustrate my question better:

 

See the Pen 86c2c518f1758d346675bdc031f6d5c8 by dada78 (@dada78) on CodePen

 

So I can't figure out - despite the examples above - how to restart the tween inside the added function "frame2tl".

After adding it the second time, I basically want to run it from the start, resetting it basically. I tried invalidate();, restart();

 

I know it's something super simple...(sigh)

 

Thanks!

[Carl 9,066 Likes (Superhero)]

Thanks for the demo. Very helpful. 

 

This is definitely a little tricky. 

 

Once the frame2tl() function returns a timeline and it gets immediately put into the parent tl, you really don't have any direct access to it. You could ask tl for its first child animation and then try to set the child's playhead back to the beginning or clear() it but once you do that you sort of permanently damaged the beginning of your parent timeline and if you ever try to reverse it or restart it, it just isn't going to work (because we've cleared out the first child timeline).

 

It sounds like you understand the most important aspect of all this, which is once one tl generated by frame2tl() moves blue to an x of "+=500", generating another timeline that moves blue to same position isn't going to do anything... because blue is already there. 

 

So the cleanest solution in this case is to make sure that every time you generate a timeline with frame2tl() you definitively declare the starting and end values. 

In the case of your demo I would use a set() like:

 

function frame2tl(){
var tl = new TimelineLite();
    //each time this timeline starts force the starting values
    tl.set('.blue', {alpha:1, x:0, immediateRender:false}); 
    tl.to('.blue',1, {x:"+=500"})
  return tl;
}

The immediateRender:false is necessary because when that tl is generated the engine doesn't know that we intend to inject that timeline into a parent with a later start time. Basically it says "wait until this timeline is ready to play before we set the values". 

 

 

http://codepen.io/GreenSock/pen/10b26eaf8044cb3983dca34f63f3d132?editors=001

 

 

I know it can seem like a bit of a mind bender. Does this solution work?

[dada78 31 Likes (Newbie)]

Thanks Carl, that makes total sense. Just thought I could use the "restart" method or something of that sort, so wasn't seeing the forest for the trees.

 

I updated the codepen to reflect your suggestion:

See the Pen 96ed663e62dcc6fbad960dc66ccd4dcf by dada78 (@dada78) on CodePen

 

Thanks again!