GotoAndPlay - stop at given point

[Virginsteele 1 Likes (Newbie)]

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

[Rodrigo 2,662 Likes (Superhero)]

Hi,

 

The tweenTo() method is what you're after. It plays the timeline from the current position to the position indicated (could be time or label) and when the timeline reaches that point it stops.

mainTL.tweenTo('yourLabel');

Also there's the possibility to add callbacks to the method. You can see more about it in the docs:

http://api.greensock.com/js/com/greensock/TimelineMax.html#tweenTo()

 

Best,

Rodrigo.

[Carl 9,066 Likes (Superhero)]

Rodrigo is absolutely correct.

 

You can also use addPause() to, well, add a pause;)

.add("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")
.addPause();


//
tl.play("contact") // jump to contact label and play until addPause() is encountered