Jump to content
Search Community

Virginsteele

Members
  • Posts

    3
  • Joined

  • Last visited

Virginsteele's Achievements

1

Reputation

  1. 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") ;
  2. 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!
×
×
  • Create New...