Search the Community

Hey! So I have a timeline loop that should loop infinitely, each new timeline has a negative offset to keep the loop from having a gap at the beginning of each timeline I can achieve the desired effect by adding the same timeline with negative delay multiple times ( lots of timeline.add(anim(), "-=3") ) But for some reason today I can't wrap my brain around how to do this nicely? I have tried various things, negative repeatDelay, onComplete set time() / progress(), but none of them quite work. Something like 2 timelines and the second one loops forever sounds like the right way to do it? Please look at the codepen and all should be made clear, on each 'repeat' of the master timeline there is a gap Thank you in advance ? I'm so sure it's something really simple that I'm overlooking!?!

I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. ! I have divided my home page into 4 divs with the class of ".div-pics". And my goal is everytime you hover on one of them a description appears /with the class of ".div-desc". The animation happens through Greensock TimelineLite and the initial position of the description divs is "top: 100%". The code I currently have works, but not with the desired effect. Right now once you hover any of the divs (.div-pics), all description divs (.div-desc) will appear. Instead I would like only the hovered div's description to come on screen, but I don't know how to target it. <div id="home-about" class="div-pics div-left"> <h1 class="div-title">About</h1> <div class="div-desc dl"> <div class="div-arrow"> <div class="arrow-part arrow-top"></div> <div class="arrow-part arrow-bottom"></div> </div> <p class="div-text dt-left"> Lorem ipsum ... </p> <li class="div-link"><a href="#">Order parts</a></li> </div> </div> function loopDivs() { divArray.forEach(div => { div.addEventListener("mouseover", showDetails); function showDetails() { tlDetails = new TimelineLite(); tlDetails .to(".div-desc", 0.5, { top: "0%" }); } }); } event.target - instead of ".div-desc" won't work since in my case I can't hover the .div-desc, because it is sent all the way down and it's invisible. My idea is to hover its parent and then it would appear. Thanks in advance!

I am having problem to understand how to bind multiple animations into one variable which is in nest timelines. What I would like to achieve is a looping variables like this codepen: But with multiple animations for one/first variable (box1Timeline) like this, mentioned by @OSUblake Kindly assist, thank you!

Hi there guys! can you please help me I am struggling how to code the animation for it properly with my 4 separated frames images. I want to animate it smoothly and nicely like normal cyclist. Here's my code for animating 4 framed images. JavaScript: window.onload = init; function init() { TweenMax.set("#two, #three, #four", {alpha: 0}); animationOne(); } function animationOne() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); TweenMax.set("#one", {alpha: 1, delay: 1.3}); TweenMax.set("#two, #three, #four", {alpha: 0, delay: 1.3, onComplete: animationTwo}); } function animationTwo() { TweenMax.to("#one", 0, {alpha: 0, delay: 1}); TweenMax.to("#two", 0, {alpha: 1, delay: 1}); TweenMax.to("#two", 0, {alpha: 0, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 1, delay: 1.1}); TweenMax.to("#three", 0, {alpha: 0, delay: 1.2}); TweenMax.to("#four", 0, {alpha: 1, delay: 1.2}); } HTML: <div id="cyclist"> <img id="one" src="https://s32.postimg.org/inysw8m2d/wiggins_01.png"/> <img id="two" src="https://s32.postimg.org/ip8qpnnw5/wiggins_02.png"/> <img id="three" src="https://s32.postimg.org/c0279n2k5/wiggins_03.png"/> <img id="four" src="https://s32.postimg.org/j4k0io9th/wiggins_04.png"/> </div> CSS: img { position: absolute; left: 10px; top: 10px; bottom: 0; right: 0; } For full editing please go here: http://codepen.io/Waren_Gonzaga/pen/PzEzag Kindly fork my pen and please revise. It really helps me to figure out how to make a code for this animation.

Hi, I’m having problems re-initialising the properties of a Timeline (Codepen url attached) On start, the plane should animate in form the left (-300) This only seems to work on the initial playthru. i've looked at Clearprops, invalidate() and a few other ideas, but nothing seems to fix it so far. Any suggestions welcome Thanks

Hey guys, Just wondering if there is an easier way to first start a loop, then stop it. Let's start with this: //Single object loop function doTween():void { TweenLite.to(mc, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween}); } doTween(); //Stop loop TweenLite.killTweensOf(mc); //Multiple object loop function doTween():void { TweenLite.to(mc_01, 1, {rotation:"348", ease:Linear.easeNone, onComplete:doTween}); TweenLite.to(mc_02, 1, {rotation:"348", ease:Linear.easeNone}); TweenLite.to(mc_03, 1, {rotation:"348", ease:Linear.easeNone}); } doTween(); //Stop loop TweenLite.killTweensOf(mc_01); TweenLite.killTweensOf(mc_02); TweenLite.killTweensOf(mc_03); If there are heaps of objects looping, is there an easier way to stop them all (like by stopping the function somehow)? Also in case 2, let's just say there is a grandfather clock swinging. You can't use the above method because it needs to go back and forth. function tilt_right() { TweenLite.to(mc, 1, {_rotation:30, onComplete:tilt_left, } ); } function tilt_left() { TweenLite.to(mc, 1, {_rotation:-30, onComplete:tilt_right, } ); } tilt_right(); Once I want it to stop looping, what code would I use? I could possibly use the killTweensOf method again, but if each function had heaps of tweens, it seems like a clunky way of doing it. Thanks guys, Rhys.

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

Hi - I'm new to using greensock (and actionscript) and am trying to play around with some code I found. It originally loaded several swf files and looped through them continuously - I'm trying to randomize it. I have created an array and added code to shuffle through the array, but I'm stuck trying to integrate it into the looping files. I'm pretty sure I have to do something with the loaderIndex, but I'm not sure what. Any help would be great - thanks. Code: progress_mc.scaleX = 0; var loaderIndex:Number = -1; var currentLoader:SWFLoader; var urls:Array = ["SWF0.swf","SWF1.swf","SWF2.swf"]; var swfs:LoaderMax = new LoaderMax({onComplete:completeHandler,onProgress:progressHandler,onChildComplete:childCompleteHandler}); // Loop through urls and create a queue of swf loaders for (var i:Number = 0; i < urls.length; i++) { swfs.append( new SWFLoader(urls, {container:container_mc, autoPlay:false}) ); } urls.sort(randomSort); function randomSort(a:*, b:*):Number { if (Math.random() < 0.5) { return -1; } else { return 1; } } function progressHandler(e:LoaderEvent):void { progress_mc.scaleX = e.target.progress; } function childCompleteHandler(e:LoaderEvent):void { trace(e.target + " loaded"); e.target.content.visible = false; } function completeHandler(e:LoaderEvent):void { trace("all swfs loaded"); progress_mc.visible = false; initCurrentLoader(); addEventListener(Event.ENTER_FRAME, trackSWFPlayback); } function initCurrentLoader() { loaderIndex++; if (loaderIndex == swfs.numChildren) { //reset back to 0 if the last swf has already played loaderIndex = 0; } //dynamically reference current loader based on value of loaderIndex currentLoader = swfs.getChildAt(loaderIndex); //make the content of the current loader visible currentLoader.content.visible = true; //tell the current loader's swf to to play currentLoader.rawContent.gotoAndPlay(1); } function trackSWFPlayback(e:Event):void { //trace(currentLoader.rawContent.currentFrame); //detect if the loaded swf is on the last frame if (currentLoader.rawContent.currentFrame == currentLoader.rawContent.totalFrames) { trace("swf done"); //hide and stop current swf currentLoader.content.visible = false; currentLoader.rawContent.stop(); //set up and play the next swf; initCurrentLoader(); } } load_btn.addEventListener(MouseEvent.CLICK, loadSWFs); function loadSWFs(e:MouseEvent):void { load_btn.visible = false; swfs.load(); }

I have two videos of identical length that I need to play in sync. Occasionally they do loop in sync but are most often offset by some small amount. Unfortunately this is very noticeable in my application. example: video1.addEventListener(VideoLoader.VIDEO_COMPLETE, function():void { video1.gotoVideoTime(0, true); video2.gotoVideoTime(0, true); }); Any suggestions, please?

I have an infintie scrolling stack (actually its only 4 items looping) - and it's made up of a bunch of tweens, designed to seamless loop from progress 0-1, 0-1,0-1 and so on. So if I use tl = new TimelineMax({repeat:20}); It will play seamless. Eventually I want to swipe the stack and it just rolls continuesly until it has lost momentum... (think mobile browser scrolling - where you flick your thumb and it scrolls ahead smoothly) So I paused the timeline and test with a tweening. For instance I want to move the stack 8 positions (that is moving twice through the stack of 4 items) - and since I timed each stack move with a second it would be: TweenLite.to(tl, 1, {progress:8}); Naturally it wont tween progress beyond 1. Naively I briefly thought: TweenLite.to(tl, 1, {progress:8 % 1, ease:Expo.easeOut}); would work. But of course not - it isnt moving throught the stack twice So my question is is there a way of looping progress? I am thinking of doing the "progress modulu way" in an onUpdate. But I feel it isn't right tweening a vairable and using it in onUpdate - and won't it hurt performance? or I could use tl = new TimelineMax({repeat:20000}); and just tween the totalProgress or totalTime (if possible?) But is there a better and more propper way? TIA!

Trying to work out the following and would appreciate any advice. I have a timeline animation which covers 300 frames, the animation is of a spinning cube and when played in the flash IDE the animation runs in a seemly endless loop. I would like to control the animation frame using gs in order to utilise some of the easing functions and also tween from one frame to another (for example tween to frame 250 from frame 200) however there is something which I am having trouble getting my head around. If the timeline playhead is currently on frame 250 and I would like to tween to frame 2 how is this achieved without the playhead seemingly reversing (ie what is needed is for the tween to run to the end frame of the animation and then move to frame 2). Looking at the frame and frame label plugins for tweenlite the playhead moves forward and backward where I require the playhead to always move forward and got the first frame when it gets to the final frame and needs to continue.

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