Search the Community

Hello, I have a few divs that will contain separate TimelineMax animations. Only one "slide" is visible at a time. Inside each slide are a few elements that I want to fade in using AutoAlpha... <div class="slide" id="Slide1"> <p>Line one</p> <p>Line two</p> <p>Line three</p> </div> <div class="slide" id="Slide2"> <p>Line one</p> <p>Line two</p> <p>Line three</p> </div> In an effort to save memory, I reuse the same variable called "tl" to store my TimelineMax object. After "Slide1" is done I call tl.kill() then re-instanciate it for "Slide2", and so on... The problem is when I go back to "Slide1" I kill then re-attach a new TimelineMax object. But now the animated elements do not appear. Inspecting the code, after an element is supposed to fade in it has the inline style="visibility:hidden" where as the first time TimelineMax gave them style="visibility:inherit". My guess is that TimelineMax appropriately adds the inline styles and everything works well. But the second time "visibility:inherit" doesn't work because they are inheriting "hidden" from the previous TimelineMax animation. Or something along those lines. My question(s) Is there some way to "reset" my elements so they are ready for a new TimelineMax instance? 1. Should I remove all inline styles created by TimelineMax so that I can attach a new instance later on? 2. Perhaps I should just add a TimelineMax instance once to each slide. I'm worried however that this will create memory issues with a large number of slides. 3. Finally, maybe I'm just not using kill() properly? I hope my question is clear. If not I'll try to setup a Codepen. Thanks!

Hello, I've been fighting with this for way too long now (I've probably read 14000 forum posts and know the documentation by heart) and I thought it was about time I asked for some advice. http://codepen.io/anon/pen/rVLEbE After you've finished basking in the gloriousness of this fabulous unicorn (and recovered from viewing my lazy code), perhaps you could help me out. Essentially, all I want to do is remove the delays from the respective timelines. The actual code I'm working with is much complex than this (obviously) and involves animating a bunch of SVG elements, hence the nested timelines. When the animation plays for the first time, I'd like there to be a delay at the beginning and then a delay before the second timeline begins, simple. However, using the clever GSAP magic I want users to be able to click on an element to take them to a certain "state", this will be animated using tweenTo(). The issue is if a user goes from one end of the animation to the other they have to sit through the delays as well. I'd like to remove these delays. The animation only needs to play with delays once (when the page first loads), so it could be removed at the end of each timeline (or both delays removed at the end of the master timeline). I've tried calling .delay() directly in the timeline, it works but it removes the delay before it has played, which is no good. I've tried .delay() in a function, I've tried this function via onComplete and via .call(). No joy (I read something about .delay only working once or something along those lines but I was in a state of delirium so I can't be certain). I've also tried doing weird stuff with labels then removing them later but removing them broke everything (and made my cry a bit). I tried some other things that I can't quite remember as well, but they didn't work either. Then I basically lost my mind and made a unicorn themed Codepen example to illustrate my plight. Please help, it would be most appreciated. Peter.

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

Hi, I using TimelineMax and i use lot off labels, I want to know when label enter (start or finish), how can i know this?

I'm a little bit stumped on how to make this feature work... I've got cards are flipping the way I'd like them to (Thank you GSAP!) However I want to add the functionality that if a card is already flipped over and the use clicks on another card's 'view' to flip a second card over... I want the first card (that is already flipped over to it's back) to play in reverse (and go back to its starting position) and then the second card can flip over. Much like this: http://www.google.com/landing/now/#cards/ Any help is GREATLY appreciated, as I can't figure out the proper way to achieve this effect. (you can see I get stumped at line 42 of the codepen)

Hello Every One, I would like some advice from this community of experienced interactive animators! I've been tasked with a "simple" scroll-based animation. With the first part of it featuring simple collision detection of circular objects. I'm wondering if I should FAKE the physics with static animation, OR use some kind of simple 2D physics with collision detection. I'll be using ScrollMagic to control a TimelineMax sequence, animating with SVG elements. Here is a brief overview of the animation: About 10 circles of various sizes float in 2D space, bouncing off each other, and showing a stressed effect on impact. (This could either be sortof random, or hard coded.. this is what I'm asking advice on. ) After a few collisions, the scroll based animation continues.. Next, a few circles highlight and overlap instead of colliding.. THEN, the overlapping section highlights.. A ven diagram.. Then, that ven diagram (oval) shape is animated in some way.. I have TWO primary questions: Should I use .svg elements with the image tag: <img id="circle1" src="image.svg"> or as that big string of svg code? Should I FAKE the collision detection? or implement some sort of simple 2d physics engine w/collision detection that I don't know about? (is there a GSAP class for this?) ALSO, any general advise about how to execute this would be helpful. Thanks in advance! -HaunGO

How can I force each segment of TimelineMax to be TweenMax instead of TweenLite as it seems it is happening now. I have: var tl:TimelineMax = new TimelineMax(); tl.to(mc, 1, {x:100}); if I check this with trace ( tl.getActive(false,true,false)[0]; ) I will get TimelineLite. do I have to do tl.add ( TweenMax.... ) or there is a way to make TweenMax to be default for each addition to TimelineMax if lined with .to, .from, .fromTo ... ?

I want to control my GASAP timeline that I have created in Adobe Edge Animate so this is what I do. //declare my variables var square1 = sym.$("square1"); square2 = sym.$("square2"); square3 = sym.$("square3"); square4 = sym.$("square4"); var tl = new TimelineLite(); //my simple timeline tl.to(square1, 2, {x:445}) .to(square2, 1, {x:-150}) .to(square3, 1, {y:"-=160"}) .to(square4, 1, {y:"-=160"}) sym.$("pauseBtn").click(function() { tl.pause() }); sym.$("playBtn").click(function() { tl.resume() }); and so on... (yeah I figured it out and this is the course I used to figure it out http://greensock.com/sequence-video AWESOME easing_2.html

Hello. I am in need of serious help with this problem I'm facing. First off let me tell you what I want to achieve with my code. On click of a button at the top-center of my screen, 4 fishes are to be tweened with bezier movements to simulate 'swimming' through water. They have other functions but this is the part that I need to get working. function tweenFish():void { var numY:Array = new Array; for (var count:Number = 1; count < 5; count++) { numY.push(count+8); } numY.reverse(); trace(tweenArr, round); for (var numX:Number = 0; numX < 4; numX++) { var randomStart:Number = (Math.floor(Math.random() * (460 - 140 + 1)) + 140); _difficulty[numX].y = randomStart; _difficulty[numX].x = -50; if (round == 1) { tweenArr[numX] = TweenMax.to(_difficulty[numX], (numY[numX]/round), {bezier:{curviness:2, autoRotate:true, values:[{x:50, y:randomStart+5}, {x:150, y:randomStart-5}, {x:250, y:randomStart+5}, {x:350, y:randomStart-5}, {x:450, y:randomStart+5}, {x:550, y:randomStart-5}, {x:770, y:randomStart+5}]}, ease:Cubic.easeInOut}); } } tMax.add(tweenArr); } This is the function I use to setup the tweens for the fishes. Each fish (set in an array called _difficulty) is given a set x value (offscreen) and a random y value so that each run they will 'swim' across the stage. This works perfectly. In fact, all of it runs perfectly...until I try to run it again. This is my initialization which basically stops the round if the fishes make it off the stage without being clicked (intended functionality). var tMax:TimelineMax = new TimelineMax({onComplete:endRound}); And this is the function it calls. function endRound():void { GoFishing.removeEventListener(MouseEvent.CLICK, fish); while (tweenArr.length > 0) { tweenArr.length = 0; } // tMax.clear(); POSSIBLE CODE? gotoAndStop("endGameResults"); scoreBox.text = "Your score is: " + points; gameResultsBG.width = 1; gameResultsBG.height = 1; TweenLite.to(gameResultsBG, 1.5, {scaleX:1.1, scaleY:1.1}); TweenLite.to(gameOverText, 3, {autoAlpha:1}); TweenLite.to(playAgain, 2, {visible:true}); timerX.stop(); timerX.removeEventListener(TimerEvent.TIMER, clock); playAgain.addEventListener(MouseEvent.CLICK, function(e:MouseEvent):void { MovieClip(root).gotoAndStop(1); GoFishing.addEventListener(MouseEvent.CLICK, fish); round = 0; } ); } Don't mind the commented line at the top. Anyway, this function leads to frame 2 where it's an end-game screen and it allows you to retry. 'playAgain' would take you to frame 1 and play the tween again when the button at the top is clicked, or so I thought. This is where the fishes are frozen off screen (I expanded the window and saw), and they do not move when the function is called, BUT the timer for the timeline STILL RUNS. Know why? The timeline takes 10 seconds to run each time at first. On the second run, 10 seconds pass and it leads me to the end-game screen. So clearly the timeline is running as I would expect it to, but the fishes aren't being moved. Is there something wrong with my code here? Do I need a different approach? Also I just thought of this: Would disabling these fishes, or switching to another frame at any point mess up the tween functionality? Thank you for your help.

Hi, I'm working on a new interface using SVG, GSAP and JQuery. I'd like a fluid interface with smooth interactions, and without staggered effects as you can see on this codepen (when the mouse move too fast between the plygons). I'd like something like this (each area back to its place before activating the new MouseEvent) but without the memory effect wich append a new Timeline each time the mouse is over a new area. I tried a lot of things like tl : new Timeline ({onStart:removeMouseEvent, onComlpete:addMouseEvent}) but the result is never what i want exactly. Is there a way to do that ? I hope I was clear enough, my english is pretty approximate. Thanks for reading and thanks for your amazing API.

In the Greensock Home Page animation it shows how to use a different code for IE8 using an if (_isOldIE) ..else statement. Then, in the codepen it states: tl.add( new TweenMax(star, duration, etc. etc. Is it possible to add a TimelineMax sequence there instead of TweenMax and is there a codepen example of this anywhere?

After a lot of back & forth regarding animation on a current project, I whipped up an export script to translate After Effects CC compositions into TweenMax/TimelineMax documents. I'll be adding more documentation & examples, but if you'd like to give it a try, you can find the script at: https://github.com/Meandmybadself/AfterMax

I haven't been able to find an exact way to reproduce this. I have a simple timeline ($elBg is a jquery element): tl.add('intro').addPause('intro') .to($elBG, 2, {left: '-1040px'}) .add('something').addPause('something') .to($elBG, 2, {left: '-2040px'}) .add('ending').addPause('ending') .to($elBG, 2, {left: '-3040px'}); And I have two buttons that trigger .play or .reverse to move between the scenes. Every now and then the pause is skipped over and it continues to the next scene. I can't find an exact way to reproduce this I'm afraid as most of the time it works as expected. I have solved the issue by using tl.tweenTo(tl.getLabelBefore()); and tl.tweenTo(tl.getLabelAfter()); instead for my buttons but thought you might like to know incase there was a bug. Adam.

Hello (first of all sorry for my poor english...) I want to stop my animation (drawing svg path using timelineMax and TweenMax) at the end, I try several things but nothing works... My code looks like this : var tween = new TimelineMax() .add(TweenMax.to($path1, 2.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path1 for 2.5 .add(TweenMax.to($path2, 1, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path2 for 1 .add(TweenMax.to($path3, 1.2, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path3 for ... .add(TweenMax.to($path4, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path4 for ... .add(TweenMax.to($path5, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path5 for ... .add(TweenMax.to($path6, 1.7, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path6 for ... .add(TweenMax.to($path7, 1.5, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path7 for ... .add(TweenMax.to($path8, 0.3, {strokeDashoffset: 0, ease:Linear.easeNone})) // draw path8 for ... .add(TweenMax.to($path9, 0.2, {strokeDashoffset: 0, ease:Linear.easeNone})); // draw path9 for ... someone have an idea ? Thank you ! Thomas

I have three timelines, playButtonAppear, playButtonPulse, and playButtonDisappear. Basically, the appear and disappear ones will always overlap the basic pulse state, so the goal is to smoothly transition between the pulse's bounce, and the animation of the appear or disappear. To control this, there is an offset where one meets the other, and fiddling with it helps to dial in to make sure the overlapping items are in sync. This is all great, but I'm noticing that the values I set (even when absolute as opposed to += or -=) are not the actual values being used. For instance, if say I want the pulse to shrink down to 0.8 scale, it will shrink down anywhere from no shrink down to 0 scale depending on exactly where it intersects the appear timeline. The results also differ based upon load times for the page... if one timeline was bumped a bit, the values for the next one overlapping it are different. This is not what I want. I want it to exactly shrink and grow under all circumstances from the absolute values I've set. I understand this will mean some nasty jumps if the interval overlap timing isn't correct, but I can work to dial that in. If I say shrink down to 0.8 and loop, for instance, it should always oscillate between 1 and 0.8 regardless of where the previous timeline had it when they overlapped. I'm not sure what this sort of interpretation is called, but I vaguely remember stumbling across it once in the documentation. Any pointers as to how to alter this behavior?

I wonder how to skip resp. merge tweenTo() event when triggered multiple times. Let me give an example first of all to illustrate my purpose: http://jsfiddle.net/vvweosts/1/ For now every single animation finalizes seperate each time when the button is triggered multiple times before given tweenmax is complete. But i would like to some kind of merge all triggered tweenTo() to one single animation. One tweenMax has a duration of 2sec that scale for 0.1. When i trigger the button 4 times immediately consecutively i would like the animation to end at scale(0.4) with a duration of about 2sec. Thank you in advance

Hi All, I have created a timeline which triggers an animation of a few lines of text and a couple of images. I heavily simplified the code to keep it simple in my Codepen example. My problem is that when I click to re-trigger the animation whilst it is already animating, the animation starts behaving in a way that I would not expect it to. Some of the text and/or images fade out or stop loading. I'm two months into Javascript and GSAP so I'm sure it's down to my logic. I just cannot work out how to stop this happening. Help will be very much appreciated. Thanks for your time. Steven

This tweet is where it started https://twitter.com/gryghostvisuals/status/556154294823813120 I'm doing a series of tutorials and articles for Tuts+ on TimelineMax so I'm interested in types of effects and demos readers would like to see included in this series. Thanks in advance for your ideas posted \o/

Hey, guys! I'm wondering the best way to setup a somewhat complex situation in which I can control tweens (TweenMax) from multiple timelines (TimelineMax) and/or from timelines and the tweens themselves. This is too involved for a CodePen, but it's likely just conceptual and I'll clarify, further. Here are some givens: I'm using drawSVG, but I think the analogy can apply to any tween. For simplicity, imagine a simple x tween in all cases 5 sets of 5 unique tweens (resulting in 25 unique tweens). need to animate each set in sequentially, but out simultanously. that is, "1,2,3,4,5 in" and "12345 out." The rub is that I want to be able to interrupt at any time. If this is clear, I could end up with "1,2,3 (half way) in", interrupt, and then "123.5 out" That is, 1 and 2 will finish, 3 will be half-way complete, I interrupt, and the 1, 2, and the visible half of three all tween out at the same time. When I was able to animate in and out sequentially, this was super easy because all I had to do was create one timeline and reverse it. Most important to this question, I could interrupt any time and everything looked beautiful. Half-complete still reversed seamlessly. When I was asked to switch to sequential in and simultaneous out, I was no longer able to reverse with a single timeline.reversre() call any time I wanted. For my first test, I created two timelines: sequential and simultaneous. I could easily play sequential in, then set the progress of simultaneous to 1 and reverse that timeline out. All fine, but I was no longer able to interrupt the switches. For example, half way through sequential in, the non-complete timelines would obviously jump to their ends to simultaneously reverse out. Then I wondered if I could create just the 5 sequential timelines but tell each tween to reverse individually (instead of reversing the timeline). And, I would then cleanup using progress() to make sure the timeline was at 0, etc. That is: "group1timeline.play()"; interrupt half way through the 3rd tween; "all group1 tweens reverse"; group1timeline.progress(0). But, I got some odd results. I moved on to thinking about synchronizing progress for each corresponding tween in the sequential and simultaneous timelines, but thought that too complicated. Next I thought about not using TimelineMax at all. . Put each tween of a group in an array and then play and reverse each one. That seems like it will work. How would you recommend setting up 5 sets of tweens so that I could sequentially animate each set in, but interrupt and simultaneously animate only the progress thus far, out simultaneously?

Using TimelineMax and TweenMax, when doing a zero duration tween to adjust an object's visibility at a point on a timeline, the visibility is toggled immediately instead of in sequence. Example var text = some text object var img = some image object img.css('visibility','hidden') var tl = new TimelineMax() tl.to(text,3,{left:500}) tl.to(img,0,{visibility:'visible'}) tl.from(img,3,{left:500}) The image object will be visible at the start of the timeline animation, instead of after the text object animation. Although it works if you do: tl.to(img,0.001,{visibility:'visible'})

In this demo, am I missing something that prevents tweenTo from working when seek works just fine? I'm sure I'm just totally overlooking something simple... Thanks!

Is it possible to move labels around dynamically after they have been created? The reason I ask is that the parameters of my tweens are changing dynamically in realtime. If the start and end point of the tween moves, then I have to remove the tween from the timeline, and insert a new tween with the new parameters. What would be very nice, is if I can create the tweens based on labeled positions, and then move those labels dynamically...with the start points of those tweens moving accordingly. Is this possible? Thanks.

Hey guys! I have a div with text placed inside a container with a flexible width which means that depending on the screen width the height of the div will change. I would like to tween the height and alpha so that they start at height: 0px and autoAlpha:0 and on click the height increases to 100% of the text as it fades in. The provided example is part of a much larger timeline in my project and all other aspects of my gsap code are working great. I have read through other demonstrations using the set property, but I have not seen this working with TimelineMax, only with TweenMax. Is there something else I need to do to get my text container to start at 0 and tween to auto? Much appreciated!

Hello, I am having a little trouble with finding a good equation for animating text with a fixed play length. A user needs to be able to tell me: "I want this animation to play for [x] amount of seconds" I am using TimelineMax.staggerFrom with a SplitTextField to make this happen. I first need to ensure my understanding of StaggerFrom is correct. In this case, lets say we are doing a fade in by character. Here is my understanding of how this should work: T = total time (2 seconds in this case) C = total number of characters (let' use the word "Hello", so this is 5) A = time for each character to fade in S = stagger time (time between letters starting to fade in) I inferred from the documentation that the total time of a StaggerFrom could be calculated by the following equation: T = (S * (C-1) + A) example: "Hello" in 2 seconds 2 = (.35 * (5-1) + .6) This is saying that the total time equals the total of all the stagger times plus the time it takes for 1 character fade in. The difficult part, which I am having trouble with, is using different numbers for the stagger time and fade time, as I want the characters to overlap on the fade in. I believe my equation for how the StaggerFrom is working is incorrect, since my simulations in Excel all work but when I port it over to actionscript (and yes I checked the variables at runtime and they are matching my simulation), it only plays for around 1 second. If anyone could help correct my understanding of how StaggerFrom works, I would greatly appreciate it! Thank you!

Is there is any way to reverse a timeline in a different way compare to when it plays for example in my case, I would like to move elements in the scene one by one but when it comes to reverse the scene I am thinking of moving all the elements out of the scene at once ! So is there a shortcut for this or I have to write another timeline? This is my timeline code : var tlThree = new TimelineMax(); // SP tlThree.add( TweenMax.to(".layer-thirtyFour", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtyFive", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtySix", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to(".layer-thirtySeven", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyEight", 0.35, {visibility:"visible", left:0}) ); tlThree.add( TweenMax.to(".layer-thirtyNine", 0.35, {visibility:"visible", top:0}) ); tlThree.add( TweenMax.to('.detail[data-title="seaLevelRise"]', 0.35, {display:"block", alpha:1}) ); tlThree.add( TweenMax.to('.up[data-dest="greenHouse"], .down[data-dest="cleanEnergy"]', 0.35, {delay:0.2, display:"block", alpha:1}) ); Normally I use .reverse method like this : tlThree.reverse() But it reverses the timeline one element at a time and in some special cases I would like to reverse the timeline as a whole in a way that all elements move out of the page in 0.35 s time, please note that my CSS styles for these layers are like this for example : .layer-thirtyNine { visibility: hidden; position: absolute; left: 0; top: -100%; } So if this goes out of the page as a whole in any direction does it interfere with CSS ? Thanks in advance. PS: www.12wave.com Has done this using GSAP but I could not find out how!