Hi There!
I'm kinda new to this wonderful engine, but a veteran on AS.
I'd like to know, how can I set a navigation system, so on a click it plays the timeline but stops when said so. Take a look at my code below. I have added the labels and I have a menu so when someone clicks "about" I'd like to start playing the timeline from where it is to the about point and then stop. Tried putting the tl.pause(); but it didn't work - the timeline passes through and keep playing till the end.
Any help will be appreciated!
var mainTL = new TimelineMax({paused:true, onUpdate:updateSlider}); var slideTL = new TimelineMax({repeat:0}); slideTL.to("#introArrow", 3, {top:140, right:30 , ease:Power3.easeOut}) ; mainTL .add("begin") .to("#introArrow", 1, {top:-100, autoAlpha:0, ease:Circ.easeIn}) .to("#diver", 2, {autoAlpha:1, scale:.2, rotation:"-180deg"}) .to("#diver", 3, {top:1300, ease:Back.easeIn}) .to("#diver", .1, {autoAlpha:0}) .to("#parachuteTop", 1, {scale:1, top:200, ease:Circ.easeOut}) .to("#parachuteTop", 1, {scale:.2, top:-179, left:-210, rotation:"0deg"}) .to("#background", 3, {top:-100, ease:Circ.easeOut},"-=3") .to("#parachuteText", 1, {top:137, left: 38, scale:.6, autoAlpha:1, ease:Back.easeIn}) .to("#zepelin", 1, {top:120, left:480, ease:Circ.easeOut}) .to(".introText", 1, {top:310, ease:Circ.easeOut},"-=.5") // Start sections / about .to("#introDive", 2, {top:-1000, ease:Power2.easeOut}) .to("#about", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-200, ease:Circ.easeOut},"-=2") .to(".I-about", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("about") // Services .to("#about", 2, {top:-1000, ease:Power2.easeOut}) .to("#services", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-300, ease:Circ.easeOut},"-=2") .to(".I-services", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("services") // Gallery .to("#services", 2, {top:-1000, ease:Power3.easeOut}) .to("#gallery", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-400, ease:Circ.easeOut},"-=2") .to(".I-gallery", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .add("gallery") // Contact .to("#gallery", 2, {top:-1000, ease:Power2.easeOut}) .to("#contact", 2, {top:40, ease:Circ.easeOut},"-=2") .to("#background", 1, {top:-500, ease:Circ.easeOut},"-=2") .to(".I-contact", 2, {top:0, left:0, ease:Circ.easeOut},"-=2") .to("#secondblock", 2, {top:420, ease:Circ.easeOut},"-=2") .add("contact") ;