Susenbeth

Nice Mr Wizard! :) Really inspiring to read about somebody in the same situation as myself. Problem solvers that looked at GS several times and thought it looked to hard, and then one day just tried it out and found it easier and much more flexible than I ever known! Thanks for all flash-support and that you hold back on the laughs. For all even newer to this than me, this is a really nice forum with lots of "wizards" with really good tips and solutions. Give GS a try and the forum something to solve.

Like always, a quick wizard answer! Actually you just told me something else. The extra tl.to just to make the text "stick" longer is NOT necessary. (Or?) Thanks for all your input!

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; }

Makes lots of sense. Everything works like a charm. Thanks again!

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!

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"); }

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.

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

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});