Jump to content
GreenSock

Search the Community

Showing results for tags 'repeat'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

  • GreenSock Forums
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

  • FAQ

Categories

  • Examples
  • Showcase

Categories

  • Products
  • Plugins

Categories

  • Learning Center
  • Blog

Categories

  • ScrollTrigger Demos

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. Hello to all! Total noob at GSAP. I'm trying to make a loader (as you can see in the codepen is a carrot), and while it's loading the leaves in top of the carrots will have a wink effect. But I cant figure out how I can make the rotation smoothly! The timeline is: -15deg and then 15deg I tried to add one more tween for 0deg but without success, also I tried the yoyo but the same bad result. With CSS I would just add "alternate" on animation shorthand and "infinite". Thanks
  2. Hi, I am trying to repeat my timeline. The timeline plays perfect, but just one time. Please, can somebody please take a look at my code to see if there is any problems. import com.greensock.*; import com.greensock.easing.* mcText._alpha = 0; mcButton._alpha = 0; mcLegal._alpha = 0; mcPlaneicon._alpha = 0; mcPlaneicon2._alpha = 0; mcPlaneicon3._alpha = 0; mcPlaneicon4._alpha = 0; mcAmsterdamicon._alpha = 0; mcParisicon._alpha = 0; mcParis._alpha = 0; mcAmsterdam._alpha = 0; mcPriceamsterdam._alpha = 0; mcPriceparis._alpha = 0; var tl = new TimelineMax({repeat:2}); tl.add( TweenLite.to(mcAmsterdam, 0.3, {_alpha:90, delay:1, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdamicon, 0.3, {_alpha:90, delay:1.4, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon2, 0.3, {_alpha:90, delay:1.8, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceamsterdam, 0.3, {_alpha:90, delay:2.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcLegal, 0.5, {_alpha:100, delay:2.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdamicon, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcAmsterdam, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceamsterdam, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon2, 0.3, {_alpha:0, delay:5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcBg, 0.3, {_x:-1920, delay:5.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParis, 0.3, {_alpha:90, delay:5.8, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParisicon, 0.3, {_alpha:90, delay:6.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon3, 0.3, {_alpha:90, delay:6.6, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceparis, 0.3, {_alpha:90, delay:7, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParisicon, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcParis, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPriceparis, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon3, 0.3, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcLegal, 0.5, {_alpha:0, delay:10.2, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcText, 0.3, {_alpha:100, delay:10.7, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon4, 0.3, {_alpha:90, delay:11.1, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_alpha:90, delay:11.5, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:13, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:13.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:14, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:14.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:110,_yscale:110, delay:15, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_xscale:100,_yscale:100, delay:15.3, ease:Sine.easeIn, overwrite:false}) ); tl.add( TweenLite.to(mcBg, 0.3, {_x:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcText, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcPlaneicon4, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) ); tl.add( TweenLite.to(mcButton, 0.3, {_alpha:0, delay:16, ease:Sine.easeOut, overwrite:false}) );
  3. Hi everybody, I hope this doesn't seem too dimwitted, but I can't for the life of me figure out how to get my banners to repeat 3 times. I just started delving into the GSAP tools the other day. I have been tweaking the code below to try and get it working but I keep running into a brick wall. Any suggestions? import com.google.ads.studio.ProxyEnabler; var enabler:ProxyEnabler = ProxyEnabler.getInstance(); ///////////////////////////////////////////// import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; import com.greensock.TweenMax; import flash.display.MovieClip; //import com.greensock.plugins.BlurFilterPlugin; //TweenPlugin.activate([blurFilterPlugin]); ////////////////////////////////////////////////// /////vars ////////////////////////////////////////////////// var tt = TweenNano.to; var tf = TweenNano.from; var td = TweenNano.delayedCall; var tm = new TimelineMax({repeat:3}); stop(); //TweenLite.to(mc, 1, {blurFilter:{blurX:10, blurY:10}}); ////////////////////////////////////////////////// /////utility ////////////////////////////////////////////////// function makeBtn(_clip:MovieClip, _over:Function, _out:Function):void{ _clip.addEventListener(MouseEvent.ROLL_OVER, _over); _clip.addEventListener(MouseEvent.ROLL_OUT, _out); //_clip.addEventListener(MouseEvent.CLICK, btnClick); _clip.useHandCursor = true; _clip.buttonMode = true; } function btnOver(e:MouseEvent):void{ endframe.cta.gotoAndPlay(2); } function btnOut(e:MouseEvent):void{ endframe.cta.gotoAndPlay(1); } /*function btnClick(e:MouseEvent):void{ var sURL:String; if ((sURL = root.loaderInfo.parameters.clickTag)){ navigateToURL(new URLRequest(sURL), "_blank"); } trace("the " + e.target.name + " has been clicked"); }*/ function getElapsedTime():void{ trace("elapsed time " + getTimer() / 1000); } ////////////////////////////////////////////////// /////animation ////////////////////////////////////////////////// function slideFromLeft(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:-500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function slideFromRight(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { _mc.alpha=1; tf(_mc, _time, {x:500, ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } function fadeAlphaIn(_mc:MovieClip, _time:Number, _endAlpha:Number, _delay:Number):void { tt(_mc, _time, {ease:Strong.easeOut, alpha:_endAlpha, delay:_delay}); } ////////////////////////////////////////////////// /////banner ////////////////////////////////////////////////// function init():void{ makeBtn(btn, btnOver, btnOut); eventOne(); } function eventOne():void{ slideFromLeft(orange_mc, .5, 1, 0); slideFromLeft(logo1_mc, .5, 1, 0); td(.5, eventTwo); } function eventTwo():void{ slideFromLeft(text1_txt, .25, 1, 0); slideFromRight(text2_txt, .25, 1, .75); td(1.75, event3); } function event3():void{ fadeAlphaIn(image1_mc, .5, 1, 0); td(1, eventThree); } function eventThree():void{ fadeAlphaIn(image2_mc, .5, 1, 0); td(1, event4); } function event4():void{ fadeAlphaIn(text1_txt, 0, 0, 0); fadeAlphaIn(text2_txt, 0, 0, 0); fadeAlphaIn(image1_mc, 0, 0, 0); fadeAlphaIn(image2_mc, .5, 0, 0); fadeAlphaIn(logo1_mc, .5, 0, 0); fadeAlphaIn(orange_mc, .5, 0, 0); td(.5, eventFive); } function eventFour():void{ slideFromLeft(text3_txt, .5, 1, 0); slideFromRight(logo2_mc, .5, 1, .5); td(2.5, eventFourB); } function eventFourB():void{ tt(orange_mc, 1, {x:-600, ease:Strong.easeOut}); tt(text3_txt, 1, {x:-600, ease:Strong.easeOut}); tt(logo2_mc, 1, {x:-600, ease:Strong.easeOut}); td(.5, eventFive); } function eventFive():void{ fadeAlphaIn(endframe, 0, 1, 0); slideFromRight(endframe.choice_logo, .5, 1, 0); slideFromRight(endframe.ef_copy, .5, 1, 0); tf(endframe.ht1, .5, {y:"50", ease:Strong.easeOut, delay:.15}); tf(endframe.ht2, .5, {y:"50", ease:Strong.easeOut, delay:.2}); tf(endframe.ht3, .5, {y:"50", ease:Strong.easeOut, delay:.25}); tf(endframe.ht4, .5, {y:"50", ease:Strong.easeOut, delay:.3}); td(1.75, eventSix); } function eventSix():void{ tt(endframe.ef_copy, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht1, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht2, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht3, 1, {x:-600, ease:Strong.easeOut}); tt(endframe.ht4, 1, {x:-600, ease:Strong.easeOut}); slideFromRight(endframe.ef_copy2, .5, 1, 0); slideFromRight(endframe.cta, .5, 1, .5); fadeAlphaIn(endframe.ef_copy3, 1, 1, 1); //tt(endframe.cta, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); //tt(endframe.choice_logo, 1, {x:-600, ease:Strong.easeOut, delay:2.5}); td(.5, getElapsedTime); tm(0, eventOne); } ////////////////////////////////////////////////// init();
  4. HI, I'm really new to all this, I just looked at the 'Getting Started' video. My question is: is this the right way to get that result (the blue line shrink from left to right in an infinite loop) or there is another/better way to achive this result? At first i tried this code: TweenMax.to(".light", 0.8, {left:0, delay:1.7, ease:Power0.easeOut}); TweenMax.to(".dark", 0.8, {left:0, delay:3.7, ease:Power4.easeOut}); TweenMax.to(".dark", 0.6, {width:0, left:500, delay:4.2, ease:Power0.easeOut}); TweenMax.to(".dark", 0, {left:-500, width:500, delay:5, onComplete:complete, repeat:-1}); function complete() { TweenMax.to(".dark", 0.8, {left:0, delay:2, ease:Power4.easeOut}); TweenMax.to(".dark", 0.8, {width:0, left:500, delay:2.5, ease:Power0.easeOut}); TweenMax.to(".dark", 0, {left:-500, width:500, delay:4}); }; But doesn't seems to works, it only works withouth: repeat:-1 at the end of the line, and repeat only once. I'm sure I'm missing something... Thanks a lot
  5. Hey guys, Quick question that's been bothering me. Is there any way to have multiple values for repeatDelay? Example: Animation plays for 5 seconds 2 seconds delay Animation plays for 5 seconds 5 seconds delay ... Thanks, Marko
  6. Hi there and thx for support. Before creating a new topic I found this one http://greensock.com/forums/topic/6567-video-stop-between-loop/ but it's not exactly the same problem. I'm loading 4 different flvs (short time each between 1 and 2 minutes) using a LoaderMax that have to repeat indefinitly (until the user stop it of course). After a time videos stop repeating one after the other. They are well rewinded to 1st frame but seem to not be played again. If I wait a very long time (2h repeating) the 4 videos seem to become blocked on 1st frame. I first tried to declare repeat property as -1 like this : m_loader1 = new VideoLoader("flv1.flv", {name:"subCol", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader2 = new VideoLoader("flv2.flv", {name:"subJoie", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader3 = new VideoLoader("flv3.flv", {name:"subSur", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader4 = new VideoLoader("flv4.flv", {name:"subTrist", container:m_interface.subtileScreen, repeat:-1, width:590, height:350, autoPlay:false, visible:true }); m_loader = new LoaderMax({name:"subtile"}); m_loader.append(m_loader1); m_loader.append(m_loader2); m_loader.append(m_loader3); m_loader.append(m_loader4); m_loader.load(); I also tried to comment repeat:-1 and handle myself play and complete events for each video like this : m_loader1.addEventListener(VideoLoader.VIDEO_PLAY, onVideo1Play); m_loader1.addEventListener(VideoLoader.VIDEO_COMPLETE, onVideo1End); private function onVideo1Play(event : LoaderEvent) : void { trace("[log] onVideo1Play " + event.currentTarget.name + " video time " + event.currentTarget.videoTime); } private function onVideo1End(event : LoaderEvent) : void { trace("[log] onVideo1End " + event.currentTarget.name + " video time " + event.currentTarget.videoTime); m_loader1.gotoVideoTime(0, true); } And same behaviour, onVideo1End is called that rewind video to 0s, but video is not played even if forceplay = true. However onVideo1Play is called after onVideo1End. I think I have something wrong... Could you help me please ? Best, laugre
  7. I would like the timeline to repeat:2 then show the replay button. Thinking nested timelines function the same a regular timelines, maybe somethings wrong with my code. Thanks for the help as always.
  8. Hello again good folks, Im trying to get to grips with animating multiple elements to different (randomised) attribute values. In the codepen, a loop adds a TweenMax to the timeline for each of the red ellipses. However, the repeat and yoyo do not work - the animation only runs once. ive tried numerous variations, but Im missing something..
  9. Hi there. This is a straight forward question. What is the best technique for coding a replay button in Greensock AS3? Would TimelineMax be best? Could I see an example? Thanks in advance for any assistance.
  10. Hi, let's say we have a tween moving an element from point A to point B. We have repeat = 2 and repeatDelay = 1s. When it plays in forward direction, it goes from A to B and then executes the repeatDelay while staying at point B (the end point of the tween). After the delay, it jumps back to A for the next loop. Ok, when it plays in backward direction, it goes from B to A but then, instead of executing the repeatDelay staying at point A (its end point in that direction), it jumps immediately back to its starting point B, waiting there for the repeatDelay. So it seems to me that the reversed version of the tween is not the symmetric with the forward one. Am I wrong? is there any way - I don't now, maybe some config param - for forcing it to have the same behavior in reversed direction? Here you can find an example of the issue. Just click on the div in order to let it go forward or backward. http://codepen.io/anon/pen/qnxpd
  11. I have the following code: TweenMax.to($("#octopus"), 4, {x:'+=' + (screen.width() - $("#octopus").width()*0.8), repeat:-1, yoyo:true,ease:Linear.easeNone,delay:0.3,onComplete:function(){ $("#octopus").toggleClass("flip"); }}); the onComplete never runs as it is an infinite loop, but I'd like to toggle a class while the animation is reversing and then again before it runs. Will I need a play / reverse loop for this or is there a way to run code before each leg of a yoyo? Thanks!
  12. Quick question: how would we set a repeat for a SteppedEase animation that's sitting inside a timeline? I noticed today that the repeat I had in this sample of code wasn't having any effect: var t1 = new TimelineMax(); t1.from("#object1", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 2, repeatDelay: -0.5 } ) t1.from("#object2", 5, { backgroundPosition: "500px 0px", ease:SteppedEase.config(5), repeat: 3, repeatDelay: -0.5 } ) Is there another way to declare the repeat, or would it be better off creating a set of functions that can set the repeat?
  13. immediateRender doesn't work on second and further repeat cycles of a timeline. Here's the code: var mainTimeline:TimelineMax = new TimelineMax ({repeat:-1, repeatDelay:0.5}); mainTimeline.from (pic_1, 0.4, {y:"-=63", ease:Back.easeOut}) .from (pic_1, 0.4, {alpha:0, ease:Linear.easeNone}, "-=0.4") .from (pic_2, 0.4, {y:"-=63", ease:Back.easeOut}, "-=0.3") .from (pic_2, 0.4, {alpha:0, ease:Linear.easeNone}, "-=0.4") .from ([pic_1, pic_2], 0.4, {colorMatrixFilter:{colorize:0xffcc00, brightness:2}, ease:Linear.easeNone, immediateRender:false});
  14. Hi, I have a problem, it happens that when using timelineMax yoyo in a small tremor when the animation is restarted, and I can overcome this?, in fiddle: http://jsfiddle.net/7NwMN/2/ , any ideas? Thanks in advance!
  15. Hi, I have a simple problem, which I wondered if VideoLoader has a solution to. If not, I can achieve it manually, but thought I'd ask. I've got a simple video which repeats 3 times: vid = new VideoLoader("video.flv", {name:"vid", container:this, repeat:3}); vid.load(); I call it like this: vid.playVideo(); ...but this only works once. The second time I try to play it, it doesn't play. I tried calling it this way instead: vid.gotoVideoTime(0); vid.playVideo(); ...but then it only plays once. Is there any way to maintain the repeat settings?
  16. This code works fine on the first loop, and not on the second: var tl = new TimelineMax({repeat:-1}) tl.fromTo(tx4,1,{skewX:-40, x:b.width},{skewX:0, x:0, ease:Linear.easeNone},'-=0.5') .to(tx4,0.5,{transformOrigin:'center bottom', skewX:70, scaleY:1.5, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:-45, scaleY:1.25, ease:Power2.easeOut},'-=0.1') .to(tx4,0.5,{skewX:0, scaleY:1, ease:Back.easeOut},'-=0.1') How can I fix this? <rant> No matter how many times I run into this problem, it never seems to sink in. Looping timelines are so unintuitive in gsap that I could pull my hair out. It's soooo easy to do whatever you want with a timeline, but the moment you try to repeat it, it becomes soooo frustrating. It shouldn't even be called "repeat", because that would lead you to believe it's going to do the same thing it did the first loop. And I already know I'm going to get several responses explaining why this is so great and expected, smh</rant>
  17. Hello, I am new to greensock and my coding may be a bit of a mess however I have an urgent problem. I created an animation and want it to repeat infinitely, however, after the second loop the animation starts to become problematic. The animations start to fire randomly and don't play like they do the first time. If my explanation is unclear please tell me and i will clarify. I have spent 3 hours trying various different approaches to repeating the code and i cannot find a solution. here is the code. stop(); //import the GreenSock classes import com.greensock.*; import com.greensock.easing.*; import flash.events.MouseEvent; var nT:Boolean = new Boolean(); var mO:Boolean = new Boolean(); var debug:Boolean = new Boolean(); var masterTL:TimelineMax = new TimelineMax(); //CREATES TIMELINE masterTL.addLabel("Start", 0); //HIDES ALL OF LAYERS BY REDUCING ALPHA TO 0 masterTL.insertMultiple([TweenLite.to(Text_S1_mc, 0, {alpha:0, x:4.75, y:30.3}), TweenLite.to(chain_mc, 0, {alpha:0, x:265.5, y:-38.05}), TweenLite.to(takeCon_mc, 0, {alpha:0, x:2.9, y:10.7}), TweenLite.to(logoSm_mc, 0, {alpha:0, x:32.7, y:153.35}), TweenLite.to(todayTxt_mc, 0, {alpha:0, x:57.05, y:62}), TweenLite.to(sheen_mc, 0, {alpha:0, x:-41, y:150.4}), TweenLite.to(forF, 0, {x:600, y:176.6, alpha:0}), TweenLite.to(getYour, 0, {alpha:0, x:-2, y:-5.6}), TweenLite.to(pullHandle_mc, 0, {alpha:0, x:255.25, y:103.9}), TweenLite.to(pfEP, 0, {alpha:0, x:-5, y:84.1}) ]); masterTL.insert(TweenLite.delayedCall(1, Sc1St)); /**********************************************************************************************************************************************/ /************************************************************ SCENE 1 START *******************************************************************/ /**********************************************************************************************************************************************/ function Sc1St():void { if (debug == true){ trace("scene 1 begun"); }; //TEXT APPEARS masterTL.insert(TweenLite.to(Text_S1_mc, 1, {alpha:1})); //CHAIN AND HANDLE APPEAR AFTER DELAY masterTL.append(TweenLite.to(chain_mc, 0.5, {alpha:1}), 0.5); masterTL.append(TweenLite.to(pullHandle_mc, 0.5, {alpha:1}), -0.5); //MAKE HANDLE PULL DOWNWARDS masterTL.append(TweenMax.to(pullHandle_mc, 0.5, {y:124.9, repeat:1, yoyo:true, ease:Quad.easeOut, delay:1})); masterTL.append(TweenMax.to(chain_mc, 0.5, {y:-17.05, repeat:1, yoyo:true, ease:Quad.easeOut, onComplete:rTxt}), -1); }; //ROTATE AND MOVE TEXT OFF SCREEN function rTxt():void { //SPIN TEXT - LASTS 4.5 SECS masterTL.append(TweenMax.to(Text_S1_mc, 0.5, {scaleX:-1, x:239.25, repeat:8, yoyo:true, ease:Quad.easeInOut})); //MOVE TEXT, HANDLE AND CHAIN masterTL.addLabel("sc2St", 4.1); if (debug == true){ trace("scene 1 end"); }; /*WHEN FINAL TWEEN COMPLETES CALL SCENE 2*/ masterTL.insert(TweenLite.delayedCall(1, Sc2St)); }; /**********************************************************************************************************************************************/ /************************************************************ SCENE 1 ENDS ********************************************************************/ /**********************************************************************************************************************************************/ /**********************************************************************************************************************************************/ /************************************************************ SCENE 2 START *******************************************************************/ /**********************************************************************************************************************************************/ function Sc2St():void{ if (debug == true){ trace("scene 2 begun"); }; masterTL.insertMultiple([TweenLite.to(Text_S1_mc, 2, {y:400, alpha:0, ease:Quad.easeOut}), TweenLite.to(chain_mc, 2, {y:-300, alpha:0, ease:Quad.easeOut}), TweenLite.to(pullHandle_mc, 2, {y:-294, alpha:0, ease:Quad.easeOut}), TweenLite.to(logoSm_mc, 2, {alpha:1, delay:0.2}), TweenLite.to(takeCon_mc, 2, {alpha:1, delay:0.2}), TweenLite.to(todayTxt_mc, 2, {alpha:1, delay:0.2}) ],"sc2St"); masterTL.append(TweenMax.to(todayTxt_mc, 0.3, {scaleX:1.2, scaleY:1.2, x:38.85, y:55, repeat:1, yoyo:true, ease:Quad.easeInOut}),-1); if (debug == true){ trace("scene 2 end NEARLY"); }; masterTL.addLabel("sc3St", 10.5); masterTL.appendMultiple([ TweenLite.to(sheen_mc, 0.5, {alpha:0.6}), TweenLite.to(sheen_mc, 1, {x:255, ease:Quad.easeInOut}), /*WHEN FINAL TWEEN COMPLETES CALL SCENE 3*/ TweenLite.delayedCall(2, Sc3St) ]); }; /**********************************************************************************************************************************************/ /************************************************************ SCENE 2 ENDS ********************************************************************/ /**********************************************************************************************************************************************/ /**********************************************************************************************************************************************/ /************************************************************ SCENE 3 START *******************************************************************/ /**********************************************************************************************************************************************/ function Sc3St():void{ if (debug == true){ trace("scene 3 begun"); }; masterTL.insertMultiple([TweenLite.to(logoSm_mc, 2, {alpha:0}), TweenLite.to(todayTxt_mc, 2, {alpha:0}), TweenLite.to(takeCon_mc, 2, {alpha:0}), TweenLite.to(forF, 0, {x:24.65, y:176.6, delay:0.5}), TweenLite.to(logoSm_mc, 0, {x:78.5, y:40.4, scaleX:0.66, scaleY:0.66, delay:1}), TweenLite.to(getYour, 2, {alpha:1, delay:1}), TweenLite.to(logoSm_mc, 2, {alpha:1, delay:1}), TweenLite.to(pfEP, 2, {alpha:1, delay:1}), TweenLite.to(forF, 2, {alpha:1, delay:1}), ],"sc3St"); forF.addEventListener(MouseEvent.ROLL_OVER, overHandler); forF.addEventListener(MouseEvent.ROLL_OUT, outHandler); forF.addEventListener(MouseEvent.CLICK, clickHandler); function overHandler(event:MouseEvent):void { if (forF.alpha == 1 && mO == false){ masterTL.insert(TweenLite.to(forF, 0, {alpha:0.5})); mO = !mO; } else { //DO NOTHING } } function outHandler(event:MouseEvent):void { if (forF.alpha == 0.5 && mO == true){ masterTL.insert(TweenLite.to(forF, 0, {alpha:1})); mO = !mO }else{ //DO NOTHING }; }; function clickHandler(event:MouseEvent):void{ if (debug == true){ trace('click registered'); }; navigateToURL(new URLRequest("http://www.kegel8.co.uk/articles/pelvic-floor-exercise/how-to-do-kegel-exercises.html")); }; if (debug == true){ trace("scene 3 end"); }; masterTL.appendMultiple([ TweenLite.to(getYour, 0, {alpha:0, delay:5}), TweenLite.to(logoSm_mc, 0, {alpha:0, delay:5}), TweenLite.to(pfEP, 0, {alpha:0, delay:5}), TweenLite.to(forF, 0, {alpha:0, delay:5})]); masterTL.append(TweenLite.delayedCall(0, done)); } /**********************************************************************************************************************************************/ /************************************************************ SCENE 3 ENDS ********************************************************************/ /**********************************************************************************************************************************************/ //FIRES WHEN ALL ANIMATION IS DONE function done() { if (debug == true){ trace('im done'); }; masterTL.complete(); TweenLite.delayedCall(0, restartTheTimeline); } //RESTARTS THE TIMELINE function restartTheTimeline(){ if (debug == true){ trace("restart"); }; masterTL.gotoAndPlay("Start") }
  18. Is there any way I can reduce the size of TweenLite's footprint within my Flash banner? On publish, Actionscript 2.0 Classes make up 20K of my 32K banner. I'm not doing anything crazy here, just fading in/out and moving up/down. I tried using TweenNano...file size was GREAT. But I couldn't figure out how to make my banner repeat only two times, since there is no "repeat" or "restart" features like there are in TweenLite. Am I importing something that I don't need? Here's my AS2.0 TweenLite Code: // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define the timeline var timeline:TimelineLite = new TimelineLite({onComplete:repeat}); // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { timeline.restart(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// // get your tween on timeline.appendMultiple([ TweenLite.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5}), TweenLite.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5}), TweenLite.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5}), TweenLite.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5}), TweenLite.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3}), TweenLite.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5}), TweenLite.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5}), TweenLite.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5}), TweenLite.from(stall, 2, {_y:"10", delay:10})]); stop(); Here's my AS2.0 TweenNano code. File size is great, but I can't figure out how to make it repeat only twice. // import the tween engine import com.greensock.*; import com.greensock.easing.*; ////////////////////////////////////////////////////////////////////////// // define repeat function variables var nPlays = 0; var totPlays = 2; // repeat timeline if played less than three times function repeat() { if (nPlays < totPlays) { //initBanner.start(); initBanner(); nPlays++; } } ////////////////////////////////////////////////////////////////////////// function initBanner({onComplete:repeat}) { //the issue is with this line TweenNano.from(text1, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.from(text1b, 1, {_alpha:0, _y:"40", ease:Expo.easeOut, delay:.5, overwrite:0}); TweenNano.to(text1, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.to(bg1, 1, {_alpha:0, ease:Expo.easeOut, delay:2.5, overwrite:0}); TweenNano.from(text2, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:3, overwrite:0}); TweenNano.to(text2, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:5, overwrite:0}); TweenNano.from(text3, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:5.5, overwrite:0}); TweenNano.to(text3, 1, {_alpha:0, _y:"20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(text4, 1, {_alpha:0, _y:"-20", ease:Expo.easeOut, delay:7.5, overwrite:0}); TweenNano.from(stall, 2, {_y:"10", delay:10, overwrite:0}); } initBanner(); stop();
  19. Hi, This is my first tutorial lesson and I do not know what is wrong. The following code simply moves a logo and makes it bounce a bit. I want to yoyo the action and repeat it indefinitely. I think the code is right. For some reason, It does the animation one time. There is no repeat or yoyo. Any help is appreciated. Here is the code: function logoAnimate(){ var logo = document.getElementById("tlogo"); TweenLite.to(logo, 3, { margin:"0 0 0 120px", ease:Bounce.easeOut, repeat:-1, yoyo:true }); }
  20. Hi, Thank you for your library. I have been testing out and trying to create a infinite scroll of images in EaselJS with TweenMax and TimelineMax. However, I always see gaps in images scrolling from the left and also a gap in the loop. I saw a similar question on the semless looping that has the suggestions for css trick. I am not sure how to get the effect with EaselJS canvas. Here is my code: tweens = [] for key, manifest of manifests break if index >= NUMBER_OF_ITEMS imageContainer = new createjs.Container(); imageContainer.x = -itemX; y = Math.floor(Math.random() * (displayHeight - itemY - 10)) y = y + (itemY / 2) if y < itemY imageContainer.y = y; imageContainer.name = key tweens.push(TweenMax.to(imageContainer, 50, { x: displayWidth + itemX / 2, ease: "linear" })) stage.addChild(imageContainer); preload.loadManifest(manifest); index++ mainTimeline.appendMultiple(tweens, 0, "normal", 8.5) I would repeat this append each time a set of images are loaded into the canvas. But the two problems above are always present. Is there a way to overcome those? Also, related to this question. I have a drag and drop on the image. I pause the timeline when drag and drop is performed. However when the timeline plays again, it always go back to the same previous postion. I have this to set the new position but it doesn't seem to do anything: mainTimeline.set(o, {x: newX, y: newY}) Is there a way to set the position of the object in the timeline that would conitnue the flow? Thank you for your help.
  21. Colir

    TweenLite repeat

    Hi, i would like to know if it's there a plugin to add to tweenLite to get the "repeat" method? I just want this feature, and getting TweenMax just for this, is to heavier for my project... thanks
  22. This hardly seems like the most efficient or even correct way to do something simple like this, but it's the only way I've been able to get to actually work. Just a simple color change boxShadow animation whenever you click anywhere in the window. I haven't changed the autowrite method, so it should default to auto. Yet whenever I try to overwrite these tweens, the boxShadow gets a halo of the other color. Also I have to pause and seek back to the begining or I also see a halo. It has these problems whether I'm using a single tween or two. It doesn't seem right that I should have to create two tweens, pause one, then to change it I have to pause the active, seek it, then resume the other. What's going on here? Here's the only working example I've found, testing in Firefox: var status = $('#tablet-status') var clickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px green', paused:true, yoyo:true, repeat:-1}) var unclickStatus = TweenMax.to(status,1,{boxShadow:'0px 0px 1px 1px blue', yoyo:true, repeat:-1}) $(window).mousedown(function(){ status.css('background-color','green') unclickStatus.pause() .seek(0) clickStatus.resume() }) $(window).mouseup(function(){ status.css('background-color','blue') clickStatus.pause() .seek(0) unclickStatus.resume() })
  23. Hi, I've been working on building a loading 'spinner', had the basic animation working, but I've ran into an issue once I tried to add my tweens to a timeline. The code that works is: TweenMax.staggerFromTo(bars, duration, { opacity: 0.6, repeat: -1 }, { opacity: 0.2, repeat: -1 }, duration / numberOfBars); However, when I add a timeline: var tl = new TimelineMax({align:'sequence'}); tl.fromTo($spinner, 0.5, { opacity: 0 }, { opacity: 1 }); tl.addLabel('loop') tl.staggerFromTo(bars, duration, { opacity: 0.6, repeat: -1 }, { opacity: 0.2, repeat: -1 }, duration / numberOfBars); tl.play(0); the staggerFromTo does not seem to repeat and plays only once. (I was not sure whether the 'from' or the 'to' needed the repeat paramater, but seems like it needs to be in the 'to'.) Am I doing something wrong there? Thanks, Gavan
  24. It seems that with out the repeating tweens the timeline will report the total duraiton as "3" which is accurate .. but when including the repeating tweens the timeline reports it as "1000000000000" .. which prevents me from using the append method, is there a way around this? Here is the code var intro_tl = new TimelineLite({onComplete:initScrollAnimations}); intro_tl .addLabel('outer-ring', 0) .addLabel('ring1', .5) .addLabel('ring2', 1) .addLabel('ring3', 1.5) .from( $('#db-ring'), 1.5, { ease:Quad.easeIn, css:{opacity: 0} }, 'outer-ring' ) .insert([ TweenMax.from( $('#db-outer-ring1'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ), //TweenMax.from( $('#db-outer-ring1'), 20, { repeat:-1, ease:Linear.easeNone, css:{rotation:360} } ) ], 'ring1') .insert([ TweenMax.from( $('#db-outer-ring2'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ), //TweenMax.from( $('#db-outer-ring2'), 40, { repeat:-1, ease:Linear.easeNone, css:{rotation:-360} } ) ], 'ring2') .insert([ TweenMax.from( $('#db-outer-ring3'), 1.5, { ease:Quad.easeIn, css:{opacity:0} } ), //TweenMax.from( $('#db-outer-ring3'), 30, { repeat:-1, ease:Linear.easeNone, css:{rotation:360} } ) ], 'ring3') ; console.log( intro_tl.totalDuration() );
  25. I realise the AS command to repeat a tween action is repeat : number of repeats But where does this go in my code: import com.greensock.*; TweenLite.to(test, 2, {x:198, y:250, rotation:30}); TweenLite.to(test2, 2, {x:300, y:250, rotation:60}); Sorry for the simple question but I am fairly new to tween classes...
×