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