MisterBrownZA

Hi Carl, I hope you can help me. I've been spending more and more time on greensock. Which is great. Although, I've reached a point where the animations aren't very... effective. If I add the files I'm working on under a sub directory of my main website (www.duwaynebrown.com), would you be able to help me out and streamline a few things. Maybe I can learn a thing or two Have a nice day! PM your response...

Thanks Carl, You're helpful as always. Would you then advise to create multiple "main" timelines, and never "recycle" currently used timelines as rseources/children..? Edit: Alright, so I tried implementing the code. It seems that when I try to implement the anim_main timeline, it stops listening for my click events. Please see below: anim_Start = new TimeLineMax(); anim_Start.add(tltypewriter); anim_Start.add(tlletter); $("").click(function() { anim_Start.reverse(); }); In reality, we're not trying to add new elements to the anim_Main timeline, we're just looking to control it as per normal. Think of the other two timelines as if they were tweens. Would it be wise to create 2x tltypewriter, tlletter and put them in anim_Main, and anim_Main_reverse respectively ? edit2: In my attempt to try and get codepen to work, I may have broken your code. If you don't mind, would you please do it again.

Sorry for being a drag... I managed to get to this... $("#typewriter").click(function() { clearTimeout(timeStart); var iProgress = tltypewriter.time() * 1000; // alert(iProgress); tltypewriter.reverse(); tlletter.reverse(); $("#typewriter span.char14").animate({opacity:0},3000); $("#myCanvasContainer").hide("fade",3000); var timeClick = setTimeout(function(){ tltypewriter.restart(); tlletter.restart(); var timeStart = setTimeout(function(){$("#typewriter span.char14").hide("fade",3000); $("#myCanvasContainer").show("fade",3000)},6000); },iProgress); }); It seems to respond the way I would like it to, but when controlling more than just 2 timelines, I think this sure would be an awesome feature... edit : For some reason I can't get the underscore ("_") to show when I restart the timeline... any idea's ?

Hi Carl, Thanks for the explanation. That video sure was useful. I would like to know from you... I've got two timelines for the separate animations (the timeline one, and the "wavy text" one), and I would like to somehow nest/attach them to a "main timeline", so that I can use one control to control all the timelines. Please see my sourcecode: $("#typewriter").lettering(); // $("#myCanvasContainer").show("fade",1000); var tltypewriter = new TimelineMax(/*{paused:true}*/); var iIter = 0; var iTimeScale = 2; var iCharDelay = 0.4 / iTimeScale; $("#typewriter span").each(function(){ iIter++; tltypewriter.fromTo("#typewriter span.char14", iCharDelay, {display:"inline-block"}, {display:"none"}); tltypewriter.fromTo("#typewriter span.char"+iIter, iCharDelay, {display:"none"}, {display:"inline"}); }); tltypewriter.fromTo("#typewriter span.char14", 0.5, {display:"inline-block"}, {display:"none"}); $(".tlt").lettering(); var tlletter = new TimelineMax(/*{paused:true}*/); var iIter = 0; var iTimeScale = 2; var iCharDelay = 0.4 / iTimeScale; $(".tlt span").each(function(){ iIter++; tlletter.from(".tlt span.char"+iIter, iCharDelay, {opacity:0, top:"-20"}, "-=0.1"); }); Just to re-iterate, when I click on a button, I would like to be able to control one timeline instead of trying to operate them individually. Kind Regards, Edit: This seems to be another evident problem: $("#typewriter").click(function() { tltypewriter.reverse(); tlletter.reverse(); $("#typewriter span.char14").animate({opacity:0},3000); //Insert other animations here //restart the animation to restore back to normal tltypewriter.play(); tlletter.play(); }); } This is what I'd like to achieve: var tlMain = new TimeLineMax({paused:true}); tlMain.append(tltypewriter.reverse()); tlMain.append(tlletter.reverse()); tlMain.append($("#typewriter span.char14").animate({opacity:0},3000)); tlMain.append(tltypewriter.play()); tlMain(tlletter.play()); tlMain.play();

Thanks Carl! I managed to code something that's closer to what I was doing with typewriter, however your codepen example has something I haven't seen before. What does the "-=0.95" serve as ? It seems being a club member sure has its benefits, ehh. Either way, thanks for the help!

Hi, I'm "converting" to GSAP, and I just can't seem to find anything regarding external use in any of the documentation. Please visit www.duwaynebrown.com to see what I have now. Since I don't see "typewriter" plugin under the tweens, I'd like to know if I would be able to create an instance in the timeline where it would call the typewriter() function ? Also, the h2, how would I "convert" that to tweening ?