Jump to content

Search the Community

Showing results for tags 'repeat'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 / JS
    • GSAP
    • Banner Animation
    • Jobs & Freelance
  • Flash / ActionScript Archive
    • GSAP (Flash)
    • Loading (Flash)
    • TransformManager (Flash)

Product Groups

  • Club GreenSock
  • TransformManager


There are no results to display.

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







Found 67 results

  1. drewbit

    run code on repeat

    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!
  2. 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?
  3. 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});
  4. 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!
  5. 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?
  6. 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>
  7. 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") }
  8. 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();
  9. TeaCii

    Repeat does not work

    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 }); }
  10. 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.
  11. 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
  12. 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() })
  13. 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
  14. 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() );
  15. 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...
  16. Hello, I'm working on an animation that will become a screensaver. Below I have a for loop that tweens an array of sprites from alpha 0 to alpha 1. It executes exactly as I need it, but when I try to tween endframe (as written in the second TweenMax) the delay of 18 seconds and the repeatDelay of 2.5 only works on the first loop. After the first loop, endframe fades in and out every 2.5 seconds. Here is the code snippet: for (var i:int = 0; i < gridBoxes.length; i++) { TweenMax.to(gridBoxes[i], .5, {alpha:1, delay:Math.random() * 7, ease:Circ.easeIn, repeat:-1, yoyo:true, repeatDelay:10}); } TweenMax.to(endframe, .5, {alpha:1, delay: 18, ease:Circ.easeIn, repeat:-1, yoyo:true, repeatDelay:2.5}); How can I solve this so that endframe fades in and out every 18 seconds indefinitely? I also have to apply this ability to several other movieclips exported for as3 that will fade in and out every 5, 10 and 15 seconds. By the way, endframe is a movieclip exported for as3. It's a logo so that's why I exported for as3. Thank you so much in advance!
  17. Hi all, I am sure this is something that is quite simple, however I am a newbie and would like to know how I loop the following code so that my animation keeps repeating. Would I need to rewrite the whole thing? I am new to actionscript, greensock is amazing! import com.greensock.*; import com.greensock.easing.*; //Train tween TweenNano.to(train, 0.75, {x:400, ease:Quad.easeOut}); //Rotation 1 text tween in TweenNano.to(mc, 1, {x:20, ease:Quad.easeOut}); //Rotation 1 text tween out TweenNano.to(mc, 1, {delay: 3, x:800}); //Destination text tween in TweenNano.to(destination,1, {delay: 4,x:20, ease:Quad.easeOut}); //Speed text tween in TweenNano.to(speed, 1, { x:235, delay: 4, ease:Quad.easeOut}); //Speed text tween out TweenNano.to(speed, 1, {delay: 7, x:800}); //Price text tween in TweenNano.to(price, 1, {delay: 7, x:240, ease:Quad.easeOut}); TweenNano.to(booknow, 1, {delay: 7,scaleX:1, scaleY:1, alpha:1});