Jump to content
Search Community

nested timelines

iconofsyn 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

I am making a animation which has some complex timing regarding the animation of many elements.
all of the elements need to be animated in the same way but the complexity comes from the start times

 

so i have created a master time line and placed embedded timelines inside it.
each embedded timeline has has a tween for each element, the tween is always the same but the start time differs for each.

 

for(;i>=0; i--){
	startTime = startTime + 0.002;
	HorizontalMoveTimeLine.add( TweenLite.to(b[i], this.settings.firstStageSpeed, {left:200, transformOrigin:"50 50"}),startTime );
}


i need to be able to control the start point of each embedded timeline.

so far i have managed to get each one to start at a fixed time. with this type ofcode

masterTimeLine.add(HorizontalMoveTimeLine,0.5);


Is there any way i can set a new embedded timeline to start at a time relative to annother embedded timeline?
i know that if i dont set a start time then it will default to the end of the last embedded timeline to end - and thats it.

is there a % based way of doing it (ie start when a specific timeline reaches 70%)
 

Link to comment
Share on other sites

I'm not sure I completely follow your question, but there are numerous ways to control the start time of your nested timelines. Using the position parameter is usually the easiest. 

https://greensock.com/position-parameter

 

If you want a tween or timeline to start when another timeline reaches 70%, you can check the progress() of that timeline.

https://greensock.com/docs/#/HTML5/GSAP/TimelineMax/progress/

 

To give you the best answers, we'd really like to see a simplified CodePen demo with information about the desired outcome. Here's some info about putting that together for us.

 

Thanks and happy tweening.

:)

  • Like 2
Link to comment
Share on other sites

Using relative positioning of the nested timelines, you can delay their start time or have them overlap. Using a label, you can have nested timelines start at the same time. (more info about labels in the blog post I linked to in my last reply) Here are the basic building blocks of nested timelines on a master and relative positioning.

 

See the Pen ZLxdXz by PointC (@PointC) on CodePen

Again, if you'd create a CodePen demo with a simplified version of your question along with the desired outcome, it would be most helpful in getting you the best answers.

 

Thanks.

 

Link to comment
Share on other sites

19 minutes ago, PointC said:

Using relative positioning of the nested timelines, you can delay their start time or have them overlap. Using a label, you can have nested timelines start at the same time. (more info about labels in the blog post I linked to in my last reply) Here are the basic building blocks of nested timelines on a master and relative positioning.

 

See the Pen ZLxdXz by PointC (@PointC) on CodePen

Again, if you'd create a CodePen demo with a simplified version of your question along with the desired outcome, it would be most helpful in getting you the best answers.

 

Thanks.

thanks for your help, ill get a codepen demmo setup when i have time

 

 

Link to comment
Share on other sites

here is a simple codepen demo

 

In this i have used 3 embedded time lines.
Each embedded timeline tween's ONE object, however in my real code each embedded timeline will tween hundreds of objects.

In my real code each embedded time line could have a different length each time it is used because the objects to be animated are dynamically generated.

embed_tl_one needs to start at the begging, so no problems here.


embed_tl_two needs to start at some point during embed_tl_one playback, since embed_tl_one has a fixed start point the .duration() method could be called on embed_tl_one and combined with a multipler between 0-1 to start embed_tl_two at some point after embed_tl_one has started .

embed_tl_there is different, this needs to start at some point during embed_tl_two playback.

Also, because my animation is complex i need to experiment with the embedded time lines start time and know that all later ones will shift their start time accordingly so i do need to be able to set start times which are relative to the start or end of other timelines.

 

See the Pen MovgRQ by anon (@anon) on CodePen

 

incase you cant see the codepen demo here is the JS code

 

var tl = new TimelineLite();

var embed_tl_one = new TimelineLite();
var embed_tl_two = new TimelineLite();
var embed_tl_three = new TimelineLite();

tl.add(embed_tl_one);
tl.add(embed_tl_two);
tl.add(embed_tl_three);

embed_tl_one.to(".red", 1, {x:500})
embed_tl_two.to(".blue", 1, {x:500});
embed_tl_three.to(".green", 1, {x:1000});

 

Link to comment
Share on other sites

Timelines don't auto-shift their children when a child has its startTime() changed.

 

When you are building your timeline you can use the recent() method to inspect the previously added child.

In the following modification of your demo you can see that timelines are added relative to the duration of the previous child. 

In this case each new timeline gets added in the middle of the previous timeline

 

tl.add(embed_tl_one);
tl.add(embed_tl_two, "-=" + tl.recent().duration()/2);
tl.add(embed_tl_three, "-=" + tl.recent().duration()/2);

 

See the Pen gRxbvd?editors=0010 by GreenSock (@GreenSock) on CodePen


If you decide to change the startTime() of a child animation and then want to shift other children you can use shiftChildren() 

Also, getChildren() is very powerful and allows you to loop through any child, inspect it, and modify it.

 

 

 

 

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