Jump to content
Search Community

Nesting timelineMax timelines

Susenbeth 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, I´m new to this but i love it so far....except for this problem.

I made several timelines for my animations, but i can´t get them to loop/repeat. One works fine, but ill guess I´ll have to nest them some way?

Or have I got it all wrong??

 

var t1 = new TimelineMax();
				t1.to(txt1_1, 0.5, {opacity:1, ease: Power2.easeOut}).to(txt1_1, 11, {opacity:1}).to(txt1_1, 0.5, {opacity:0, left: -300});

			var t2 = new TimelineMax();
			t2.to(txt1_2, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_2, 2, {opacity:1}).to(txt1_2, 0.5, {opacity:0, top:30});

			var t3 = new TimelineMax();
				t3.to(txt1_3, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:3}).to(txt1_3, 2, {opacity:1}).to(txt1_3, 0.5, {opacity:0, top:30});

			var t4 = new TimelineMax();
				t4.to(txt1_4, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:6}).to(txt1_4, 2, {opacity:1}).to(txt1_4, 0.5, {opacity:0, top:30});

			var t5 = new TimelineMax();
				t5.to(txt1_5, 0.5, {opacity:1, ease: Power2.easeOut, top:0, delay:9}).to(txt1_5, 2, {opacity:1}).to(txt1_5, 0.5, {opacity:0, left: -300}) ;

			var tlp1 = new TimelineMax();
				tlp1.to(panel1, 0.5, {opacity:1, ease: Power2.easeIn, left:0, delay:12}).to(panel1, 5, {opacity:1}).to(panel1, 0.5, {opacity:0});

			var tlp2 = new TimelineMax();
				tlp2.to(panel2, 0.5, {opacity:1, left: 680, ease: Back.easeOut.config(1.2), delay:11.5}).to(panel2, 5.5, {opacity:1}).to(panel2, 0.5, {opacity:0});

 

See the Pen MXaRJg?editors=1111 by Susenbeth (@Susenbeth) on CodePen

 

Link to comment
Share on other sites

Hi @Susenbeth :)

 

Welcome to the GreenSock forum.

 

I'm not sure I understand what you're asking. Do you want all the timelines to repeat or just one? I didn't see any repeats set in the vars for any of the timelines. You'd do that like this:

 

var t1 = new TimelineMax({repeat:10});
// use -1 if you want it repeat forever

 

I'm not sure what you need to happen as I see a lot of delays on the timelines. You could probably make one timeline or maybe create them in functions and return them to a master timeline. This article by @Carl should be helpful.

https://css-tricks.com/writing-smarter-animation-code/

 

 

 

I also couldn't see any of your .pngs in your demo as you're linking to local files. If you need more help, additional details about what you want to happen would be great. Hopefully that info helps a bit. Happy tweening.

:)

 

 

  • Like 3
Link to comment
Share on other sites

Thanks for the quick reply

 

Sorry didnt want to clutter the "working" code. I just want a way to repeat all my timelines one more time. 

I want a main timeline that "contains" the other ones....should be possible right?

 

(I´ll watch the links and see if I get any smarter :)

Link to comment
Share on other sites

Thanks, that helped a lot.

 

Now my problem is to define "where" stops after it´s repeated x number of times. 

 

I´ve now changed everything to functions on a "main timeline", pretty happy with the result. But I want it to stop at the label "end". Is this even possible or do I have to do something else?

 

function part1() {
	var tl = new TimelineMax();
	tl.to(txt1_1, 1, {opacity:1, ease: Power2.easeOut});
	return tl;
}

function part2() {
	var tl = new TimelineMax();
	tl.to(txt1_2, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_2, 2, {opacity:1}).to(txt1_2, 0.5, {opacity:0, top:30});
	return tl;
}

function part3() {
	var tl = new TimelineMax();
	tl.to(txt1_3, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_3, 2, {opacity:1}).to(txt1_3, 0.5, {opacity:0, top:30});
	return tl;
}

function part4() {
	var tl = new TimelineMax();
	tl.to(txt1_4, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_4, 2, {opacity:1}).to(txt1_4, 0.5, {opacity:0, top:30});
	return tl;
}

function part5() {
	var tl = new TimelineMax();
	tl.to(txt1_5, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_5, 2, {opacity:1}) ;
	tl.to('#txt1_1, #txt1_5', 0.5, {opacity:0, left: -300});
	return tl;
}

function part6() {
	var tl = new TimelineMax();
	tl.to(panel2, 0.5, {opacity:1, left: 680, ease: Back.easeOut.config(1.2)});
	tl.to(panel1, 0.5, {opacity:1, ease: Power2.easeIn, left:0}).addLabel("end");
	tl.to("#panel1, #panel2", 4, {opacity:1});
	tl.to("#panel1, #panel2", 0.5, {opacity:0, left:1080});
	return tl;
}

var masterTimeline = new TimelineMax({repeat:1, repeatDelay:0.5});
	masterTimeline
	  .add(part1())
	  .add(part2())
	  .add(part3())
	  .add(part4())
	  .add(part5())
	  .add(part6());


 

I didn´t make a CodePen cause all the images is local. But if needed I can put them on a server. 

 

Link to comment
Share on other sites

If the label is on the master timeline, it's quite simple. Use an onComplete callback and the tweenFromTo() method to tween the timeline to that label after the repeats are done. Here's the same demo from above with that addition.

 

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

 

That works if the label is on the master timeline. The way you have it structured in your demo code, the label is on a nested timeline. That's a bit trickier. I've actually never tried that and had to look it up. This thread seems to cover it nicely.

My recommendation would be to make it easy on yourself and add the label to the master timeline. You could move those two panel opacity tweens in part 6 to a new part 7 so a label would fit nicely between them on the master.

 

Hopefully that helps. Happy tweening.

:)

 

  • Like 2
Link to comment
Share on other sites

I LOVE YOU! 

 

Super tip. Of course I want the easiest way possible so I made a split of the last tl.

 

But one strange thing. 

Before the repeat was set to 1, and gave the result of the banner to display twice (as it should). Now I had to set it to 0 to get the same result. Any idea why?

 

function part1() {
	var tl = new TimelineMax();
	tl.to(txt1_1, 1, {opacity:1, ease: Power2.easeOut})
	return tl;
}

function part2() {
	var tl = new TimelineMax();
	tl.to(txt1_2, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_2, 2, {opacity:1}).to(txt1_2, 0.5, {opacity:0, top:30})
	return tl;
}

function part3() {
	var tl = new TimelineMax();
	tl.to(txt1_3, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_3, 2, {opacity:1}).to(txt1_3, 0.5, {opacity:0, top:30})
	return tl;
}

function part4() {
	var tl = new TimelineMax();
	tl.to(txt1_4, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_4, 2, {opacity:1}).to(txt1_4, 0.5, {opacity:0, top:30})
	return tl;
}

function part5() {
	var tl = new TimelineMax();
	tl.to(txt1_5, 0.5, {opacity:1, ease: Power2.easeOut, top:0}).to(txt1_5, 2, {opacity:1}) 
	tl.to('#txt1_1, #txt1_5', 0.5, {opacity:0, left: -300})
	return tl;
}

function part6() {
	var tl = new TimelineMax();
	tl.to(panel2, 0.5, {opacity:1, left: 680, ease: Back.easeOut.config(1.2)})
	tl.to(panel1, 0.5, {opacity:1, ease: Power2.easeIn, left:0})
	return tl;
}

function part7() {
	var tl = new TimelineMax();
	tl.to("#panel1, #panel2", 4, {opacity:1})
	tl.to("#panel1, #panel2", 0.5, {opacity:0, left:1080})
	return tl;
}

var masterTimeline = new TimelineMax({repeat:0, onComplete: somethingElse });
	masterTimeline
	  .add(part1())
	  .add(part2())
	  .add(part3())
	  .add(part4())
	  .add(part5())
	  .add(part6())
	  .add("stopHere")
	  .add(part7());

function somethingElse() {
  masterTimeline.tweenFromTo(0, "stopHere");
}

 

Link to comment
Share on other sites

I'm not sure I follow the question. You want the entire timeline to play once and then play from the start to the end label, right? Then you wouldn't even need to add a repeat count. It'll just call the onComplete when it's done and the tweenFromTo() will be the second play in this case.

 

You have to remember that repeats are after the first iteration. So, if you tell a timeline to repeat 5 times, you'll actually see 6 iterations. The original play() and the 5 repeats. Does that make sense?

  

  • Like 1
Link to comment
Share on other sites

Ok, so the repeat is not necessary at all?

If I don´t want any more repeats than "somethingElse"?

Or is it some other nice way to make the banner loop several times than repeat?

 

As you can tell, javascript is not my cup of tea...but you really helped a lot.

Great support from you, thanks!

 

 

Link to comment
Share on other sites

Oh, you'd want to use the repeat property if you want to see the timeline multiple times. You just have to be mindful of how many times you wanted to see it.

 

Say you wanted 5 total views counting the onComplete that tweens to the 'stop' label. In that case, you'd set the repeats to 3. You'd have the original iteration, 3 repeats and the onComplete tweenFromTo() as the 5th play. (The tweenFromTo() isn't technically a repeat, but we're calling it one in this scenario)

 

Does that make sense?

  • Like 1
Link to comment
Share on other sites

Having some trouble to find what im searching for in the forum, so I follow up on my question here. Feel free to move it.

 

I tried to shorten my code with stagger. Can´t really get it to work (maybe I should go through the book :).

 

I want my stagger to reveal a text, the hide it. After that display the next one in line.

Any easy way to accomplish that?

 

This is my lame try to combine 4 functions nto one:

function part2() {
	var tl = new TimelineMax();
	tl.staggerTo(".texter", 0.5, {opacity:1, ease: Power2.easeIn, top:0}, 1).staggerTo(".texter", 0.5, {opacity:0, ease: Power2.easeOut, top:0}, 1)
	//.staggerTo(texter, 1, {opacity:1}, 1).staggerTo(texter, 0.5, {opacity:0, top:30}, 1)
	return tl;
}

 

Link to comment
Share on other sites

You'd want to use the position parameter to start the second stagger earlier. As you have it now all the elements will stagger in their opacity and then all will stagger out. Using the position parameter, you can make it work correctly. Here's a basic example.

 

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

 Here's some more info about the position parameter.

https://greensock.com/position-parameter

 

Happy tweening.

:)

 

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