[GotoAndPlay - stop at given point]

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

[animating text - SplitText error]

Could you specify in which SplitText library are you referring?

 

com.greensock.utils

[animating text - SplitText error]

Hey Guys!

 

I'm new to GSAP and just trying to create an animated text. 

 

I have all the libraries loaded, but still get the error below:

 

 ReferenceError: SplitText is not defined

 

 

my js line is:

var splittxt = new SplitText("#description");

 

 

and all my script is loaded:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min.js"></script>

<script src='http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenMax.min.js' type='text/javascript'></script>

 

What is it I am doing wrong?

 

Thanks!