Jump to content
Search Community

GotoAndPlay - stop at given point

Virginsteele test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

Link to comment
Share on other sites

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.

  • Like 1
Link to comment
Share on other sites

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
 
  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...