Search the Community

New to Gsap, I have been looking forever for way to loop to specific time or label. My example is not a slider, there will be animations between each background fade, I removed absolute position on .slide for the sake of testing. When the animation first loads it will fade in from nothing, but it can not do this when it loops around again it should start from lets say 5 seconds in. Not sure exactly how to go about doing this. Create two timelines, with the opening fade, then trigger the next timeline on complete then loop. In my days of flash there was a gotoAndPlay(frame); Please forgive my lack or understanding, am sure its something simple. Just like to know the best approach. Many thanks.

Greetings and thank you in advance for reading this, I built a two frame animation that works splendidly in the CS4 authoring environment (no error nor any output other than the "trace" returns), and when the SWF file is opened with a browser, but not when the authored HTML that references the SWF is opened by the browser. The problem is that once the animation of frame 1 completes, it goes back to frame 1's default set up. It's a two-frame because logically that made sense to me. I wanted to use SWFloader and noCache, and this was the way it laid itself out to me when I developed it. I'm familiar with "gotoAndPlay" using frame numbers/names in AS3, so I built an animation that runs when a button is clicked. Upon completion of the animation, we go to frame 2 and load the external SWF. Is there something in my code that might be killing the browser? Frame 1's AS3: stop(); import com.greensock.loading.*; import com.greensock.loading.display.*; import com.greensock.*; import com.greensock.events.LoaderEvent; import com.greensock.events.TweenEvent; var var_gotoAndPlay_timer:Number = 2; mc_gotoAndPlay.addEventListener(MouseEvent.CLICK, gotoAndPlayFuntion); function gotoAndPlayFuntion(e:MouseEvent):void{ trace("call the gotoAndPlayFunction function"); var tl_gotoAndPlay:TimelineMax = new TimelineMax({delay:1, onComplete:tweenOnComplete}); tl_gotoAndPlay.insert(TweenMax.to(mc_gotoAndPlay, var_gotoAndPlay_timer, {alpha:0, y:"-50"}) ); tl_gotoAndPlay.insert(TweenMax.to(mc_overlay, var_gotoAndPlay_timer, {alpha:0}) ); tl_gotoAndPlay.insert(TweenMax.from(mc_loadingTXT, var_gotoAndPlay_timer, {delay:1, alpha:0, y:"50"}) ); } //function tweenOnComplete(e:TweenEvent):void { function tweenOnComplete() { trace("call the tweenOnComplete function"); gotoAndPlay(2); } Frame 2's AS3: stop(); trace("we are on frame 2"); var video:SWFLoader = new SWFLoader("video-cache_buster-dev-03.swf", {container:mc_holder, noCache:true, width:480, height:320, onComplete:setupButtons}); video.load(); function playSWF(e:MouseEvent):void{ video.rawContent.play(); } function pauseSWF(e:MouseEvent):void{ video.rawContent.stop(); } function setupButtons(e:LoaderEvent){ play_btn.visible = true; pause_btn.visible = true; play_btn.addEventListener(MouseEvent.CLICK, playSWF); pause_btn.addEventListener(MouseEvent.CLICK, pauseSWF); } Most of the code I've used was gleaned from help other people got on these forums, so a "thank you" to the people who helped them out because you've helped me, too. Best regards, Steve

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