Jump to content
Search Community

Restarting and added timeline?

dada78 test
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

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!

Link to comment
Share on other sites

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/

  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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?

  • Like 1
Link to comment
Share on other sites

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() )
  • Like 2
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

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 :)

  • Like 4
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

  • Solution

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?

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