Search the Community

I'm using GSAP's TimelineMax with Kinetic JS. I got them to work together, but I'm having trouble when I try to pass my own custom functions to the timeline. I've included a jsbin to show the issue. http://jsbin.com/afixoc/4/edit The first part of the animation uses a standard Kinetic JS command and this plays fine. tl.to(rect, 1, {setX:300}); The second part of the animation uses a custom function that I am adding to 'rect' and this is failing. tl.to(rect, 1, {customSetX:100}); I tried to track this by publishing the value to the console and the issue is very strange - the value that's being passed to my function seems to be NaN. Now, the console.log gets printed a number of times, so I can tell that it's being called every frame. However, I can't figure out what's going on with the parameter. When I print (typeof val) it says number, but when I print the actual val, it says NaN. (You can click 'Play Anim' and open the console in JSBin to see this) Can anyone help me understand why this is happening? (BTW, the reason I'm trying to add my own functions is because I need custom rotate and scaling code for my objects to transform around a pivot point rather than Kinetic's offset.)

Hello! I am trying to build a timeline that is composed of nested timelines. I am finding that the when I nest the timeline, the yoyo playback(and even the plain repeat) ends up playing the incorrect values and the css matrix gets set incorrectly. It works fine if I add the Tween like this: tl.add ( TweenLite.fromTo( ... )) but if I create a new timeline and add that, I get the error. tl2 = new TimelineLite(); tl2.add ( TweenLite.fromTo( ... )); tl.add( tl2 ) I have an example here: http://jsfiddle.net/7h5ED/2/ I left it in the broken state, but if you change the showBroken variable to false, you'll see the correct behavior. It should have a sequence like: slide in from top, zoom out, slide in from right. When this yoyos in the broken state, the reverse zoom goes offscreen instead of to the middle of the screen. Any help would be appreciated! Thanks!

Hi all, First of all can I just say how amazing this engine is to use! I've only been using it half a day and I have to say it is really amazing. My boss introduced me to it as he uses greensock for actionscript, and seeing as I am no flash programmer, he asked me to talk a look at the javascript version and its amazing My question is probably more a javascript question rather than a question about the actual engine files.. I have 2 divs (but want to add more), the first one called firstSlide and the second one secondSlide and what I want to do is once the animations are complete on the first slide, I want to add a delay of 5 seconds and then transition out the first slide and then show the second. Could someone please point me in the right direct of how I could do this please? Thanks in advance!

Hi, I have a text (blockquote) that should move from right to left constantly. It should start with opacity 0 then go to opacity 1 in 2 seconds. After that, it should keep moving constantly (same speed) for about 10 seconds and then fade out (back to opacity 0) but keep moving in the same speed. I've tried this way, but it doesn't get the correct movement I want: var tl = new TimelineLite(); tl.to('.quote1', 2, { opacity:1, right:"+=50px", delay:3 }) .to('.quote1', 10, { right:"+=150px" }) .to('.quote1', 3, { opacity:0, right:"+=50px" }); What I want to know is if it's possible to have a timeline for each property (e.g. "right" and "opacity") or if there is a better way to achieve the same result with only the object timeline...

Hello, I've been looking for something that looks pretty simple, but I've never found anything about this: I'd like to use the insertMultiple method and play the timeline with one single ease function. What is the correct syntax? Here is one of the (many) things I've tried so far: var myTimeline:TimelineLite = new TimelineLite({onComplete:zoomComplete, ease:Bounce.easeInOut}); myTimeline.insertMultiple([new TweenLite(R, dureeTween, {x:newR.x, y:newR.y}), new TweenLite(I, 2, {x:newI.x, y:newI.y}), new TweenLite(Cmin, 2, {x:newCmin.x, y:newCmin.y}), new TweenLite(Cmax, 2, {x:newCmax.x, y:newCmax.y}), new TweenLite(seuil, 2, {x:newSeuil})] ); The ease function does not seem to be taken into account, can someone tell me what I'm doing wrong? Thanks in advance ^^

I have a few tweens as part of a TimelineMax instance that have a speed of 0. However they are executing out of sequence with the rest of the tweens, seemingly running at the very start of the timeline playback. Changing the speed to 0.1 fixes this issue. Here's a fiddle: http://jsfiddle.net/wxxkA/2/ Any ideas? Thanks

Say you want to tween an element from point A to Z over 10 seconds on a new timeline, but want to stop that tween 5 seconds into the timeline, so that the result is more like a tween from A to M over 5 seconds, but following it's A to Z path over 10 seconds. Any way to kill an element's property tween at a specific point in a timeline?

Could someone explain the difference between using kill() or clear() on a timeline? That is, besides kill() being able to kill individual tweens, lets assume we're using kill() on the entire timeline itself. The documentation is unclear (use kill to kill a tween; define kill?). If they're the same, then why use clear(), other than the timeline instance being preserved? And, I'm interested if either resets the positions of elements in a timeline to their beginning position, or what the best way to go about that is? Thanks!

Hi there! I hope that somebody can help me out with a problem I stumbled upon. I want to animate on a scroll by using the superscrollorama plugin. With GSAP I can use a timeline to change the position of an element on scrolling. I want the following actions to take place: Move the element from -1900px to 550px on screen by scrolling After that, let the element stay at it's position while scrolling a certain amount of pixels (let's say 2000px) After the 2000px without movement, let the element move from it's current position to 1900. So we have an animation of an element from the left side of the screen, to the right with a pin moment. I hope someone can help me out here because I have not succeeded in writing a code that doesn't conflict with the first animation and a pin moment. This is what I have so far: controller.addTween('body',(new TimelineLite()).append([TweenMax.fromTo($('#vogel'), 1, {css:{left: -1900}, immediateRender:true}, {css:{left: 550}})]), 1000);

Hello, I would like to start and reverse a timeline animation for the element that I'm hovering with the mouse. Then on mouseleave I would like to reverse this animation. I know I could create a timeline for each possible element. However is it also possible to tell the timeline which element should be effected with the animation by passing the element ID to the timeline? Something like this: <div id="navipoint-board"> <div class="navipoints"><a href="/control/category/~category_id=MANGO"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_mango.png" id="mango"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ROTEFRUECHTE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_rotefruechte.png" id="rotefruechte"></a></div> <div class="navipoints"><a href="/control/category/~category_id=ERDBEERE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_erdbeere.png" id="erdbeere"></a></div> <div class="navipoints"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/active_vanille.png" id="vanille"></div> <div class="navipoints"><a href="/control/category/~category_id=HAFER"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_hafer.png" id="hafer"></a></div> <div class="navipoints"><a href="/control/category/~category_id=OLIVE"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_olive.png" id="olive"></a></div> <div class="navipoints"><a href="/control/category/~category_id=PFIRSICH"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_pfirsich.png" id="pfirsich"></a></div> <div class="navipoints"><a href="/control/category/~category_id=KOKOS"><img src="/images/templates/TIPPS/PLAISIRSNATURE/fr_CH/inactive_kokos.png" id="kokos"></a></div> </div> <script type="text/javascript"> $(document).ready(function() { TweenMax.to($('.navipoints a img'), 0, {rotation:"20"}); var tlRotation = new TimelineMax({paused:true}); tlRotation.to("Mouseover-Element", 0.5, {rotation:"0"}); $('.navipoints a img').mouseenter(function() {tlRotation.play(this);}); $('.navipoints a img').mouseleave(function() {tlRotation.reverse(this);}); }); </script> Thank you very much, Robert

I have several elements which will be using the same animation functions. So I want to have a timeline for animating 20 px to the left for instance. How do I pass in the element to the timeline without knowing before hand which element will need to be moved? I imagine the most efficient way is to not create a new timeline variable each time which what I think is throwing me for a loop. e.g. http://jsfiddle.net/ccarterc1984/6LQhJ/ This is my first day trying Greensock so be gentle.

Hello all ! I'm new to the greensock API, and therefore also new to the forum ! Well, first of all, I'd like to congratulate for the great job, the APIs are awesome ! I'm also just getting started in AS3, as I've always been using AS2 so far, but that's another subject... After a couple days, I think I'm aleady getting things to work nicely, so I'm pretty pleased with the quality of the platform, it makes AS3 look easy ! I got a nice animation playing, with tweens nested in timelines, all nested in one master timeline, I named masterTimeline. In the end, a button allows to restart the animation, so it triggers masterTimeline.restart() The thing is, some of the tweens don't play. I'm really puzzled by the following : //sequence 1 var barongteterot1:TimelineLite = new TimelineLite(); barongteterot1.append(new TweenLite(barong, 0.9, {rotation:-30, ease: Linear.easeOut})); //rotate barongteterot1.append(new TweenLite(barong, 0.9, {rotation:0, ease: Linear.easeOut})); //rotate back barongTimeline.appendMultiple([ new TweenLite(barong, 1.8, {x:-30, y:145, ease: Quad.easeInOut}), new TweenLite(barong, 1.8, {scaleX:0.6, scaleY:0.6, ease: Linear.easeOut}), barongteterot1]); //sequence 2 var barongteterot2:TimelineLite = new TimelineLite(); barongteterot2.append(new TweenLite(barong, 0.9, {rotation:30, ease: Linear.easeOut})); barongteterot2.append(new TweenLite(barong, 0.9, {rotation:0, ease: Linear.easeOut})); barongTimeline.appendMultiple([ new TweenLite(barong, 1.8, {x:470, y:125, ease: Quad.easeInOut, onComplete:swapDepth, onCompleteParams:[0]}), new TweenLite(barong, 1.8, {scaleX:0.2, scaleY:0.2, ease: Linear.easeOut}), barongteterot2]); //sequence 3 var barongteterot3:TimelineLite = new TimelineLite(); barongteterot3.append(new TweenLite(barong, 0.4, {rotation:-30, ease: Linear.easeOut})); barongteterot3.append(new TweenLite(barong, 0.4, {rotation:0, ease: Linear.easeOut})); barongTimeline.appendMultiple([ new TweenLite(barong, 0.8, {x:250, y:255, ease: Expo.easeIn}), new TweenLite(barong, 0.8, {scaleX:0.05, scaleY:0.05, ease: Linear.easeOut}), barongteterot3]); masterTimeline.insert(barongTimeline,"startbarong"); it plays perfectly, but when I restart the masterTimeline, the "rotate back" in sequence 1 won't play !! it's really puzzling as sequence 2 and 3 are constructed in the same way and have no problem what so ever ! I managed a work around, triggering the rotate back in a function called with onComplete, but I'd really like to understand, mostly. maybe other parts of my code are interfering (although I doubt it), but if anyone has an idea of what's happening here, I'd appreciate an explanation or any lead to a start of an explanation. Cheers all !

From the TimelineMax FAQ I understand that Timelines can only appear in one parent Timeline at a time. I'm just curious what the reason for this is. In my current project It has the unfortunate consequence that any Timeline that uses a "shared" child Timeline will have to be cleared and remade every time it's played. Which is not a huge deal, I'm just curious more than anything. Thanks!

SOLVED Forgive me in advance, please, if this is very basic — I'm setting up timelines (TimelineMax'es) and building them with relative offsets, e.g _tutorialTimeline.to(swipeToAvoid,0.25,{autoAlpha:1},"+=.5"); // add 'swipe to avoid'_tutorialTimeline.to(obstacle,4,{autoAlpha:1,z:-500},"+=1"); // move forward I'd like to be able to add labels at particular sections, so I can go back and play sections of the tutorial timeline above later, separately from the rest. From what I can see I have to add labels at particular times, like '3 seconds' -- and of course I could keep a running total of my relative times, but that seems ugly. Is it possible to pass a label in to the ().to method above to add a label with that tween, or would I need to do something else, like get the current length of the timeline in progress and use that as the time? How would I best do that? My second question is related: the tutorial timeline is added (after it's built) to a main timeline, and played as part of that. If later I want to play the tutorial timeline sections separately (as per above), I can just do that, even though it's 'included' as part of a larger timeline, as long as I have a reference to it? If not, do I need to clone it in some fashion? Thanks!

I know this is a rookie question but does someone know where to find information or knows how to setup up a basic nested TimelineMax? Any help would be appreciated. Thanks.

Hi! I have a timeline with labels/chapters. It plays and a callback is executed on every label, but the problem I'm having is to make the labels clickable, so you could jump to a certain label. It's hard to explain, so I made a jsfiddle: http://jsfiddle.net/robbue/56jW6/ When you click on a chapter the timeline jumps to the label, but the timeline is played correct after that. The labels and callback is added at line 136 and 137. Code for jumping to a label (not working correctly) is on 156, 157 and 159 I have tried several thing without luck: currentLabel(chapter), pause(chapter, false), seek(chapter, false); How could I solve this?

Hello, I have a loop in which I am placing an enemy leader, (the first enemy) and the rest that have position relative to the enemy leader.They all animate over a path. The Call: createEnemies(2,path02,100, 5,0); createEnemies(3,path02,100, 5,0); The Function: public function createEnemies(enemyNo:int, path:Array, dir:String,offset:int, duration:int, delay:int):void { for(var i:uint=1;i<=enemyNo;i++){ if (i==1){ _leaderEnemy = new ShooterEnemy(); _leaderEnemy.x=0; _leaderEnemy.y=0; _leaderEnemy.count=enemyNo; _leaderEnemy.name = "_shooterEnemy"+i; leaderEnemyArray.push(_leaderEnemy); tempCont.addChild(_leaderEnemy); } else { var _shooterEnemy:ShooterEnemy = new ShooterEnemy(); _shooterEnemy.x=0; _shooterEnemy.y=(offset*(i-1)); _shooterEnemy.name = "_shooterEnemy"+i; tempCont.addChild(_shooterEnemy)} } timeline.append(TweenMax.to(tempCont, duration, {bezier:path,orientToBezier:false, ease:Linear.easeNone}),delay ); } Every time I call the three or four times, all the enemies animate at once. But what I want is the group of enemies moving in their order. i.e. one after another I am new to timeline and tween max library so any help would be nice.

Hi - In the video it shows how you can animate between Home, Schhol, Work and Movies. Labels on the stage. I am trying to do this in Flash CS6. I have 4 buttons, and 4 labels with a Flash Tweened animation. I can not find any downloads in Flash and am a bit stuck. Can ayone point me in the right direction please? http://active.tutsplus.com/tutorials/animation/timelinelite-ultimate-starter-guide-introduction/

Can i change the elements of a timeline? I'm removing all canvas elements from #bg1 and then adding new ones. How can i update the existing timeline? var tl = new TimelineMax({paused:true}) .add(new TimelineMax() .staggerFromTo($('#bg1 canvas'), 2, {css: {autoAlpha:1}}, {css: {autoAlpha:0} },.25).duration(0.7) )

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

Hi, i need a timeline to stop at a certain point. I remember in AS there is something like tweenTo. How can i achieve this in javascript? Thank you Jan

Hello! I am building several tweened animations in Flash and then playing them in Adobe Director 11.5. The code I have in Director waits for the timeline to stop playing (playing = false) then advances to the next externally linked SWF. All of the code I find for the TimelineMax and TweenMax is on one frame, and if I add more frames the tweens restart and act erratically. Is it possible to have the flash timeline longer so Director thinks it's still playing and then jump to a frame label that says stop(); when the Tween is finished? Here is what I have so far: import com.greensock.*; import com.greensock.easing.*; import flash.events.*; import flash.events.MouseEvent; //create line var line:Shape = new Shape(); addChild(line); // variables for destination var destx:Number = 1046; var desty:Number = 480; //position moving dot at first point //be sure the instance name is mc mc.x = p0.x; mc.y = p0.y; dest.x = destx; dest.y = desty; //kill existing line line.graphics.clear(); //start new line at first point line.graphics.lineStyle(5, 0xFF0000, .9); line.graphics.moveTo(mc.x, mc.y); var tl:TimelineMax = new TimelineMax({paused:false,onUpdate:drawLine}); tl.appendMultiple([ TweenMax.to(fade2black, 2, {alpha:0}), TweenMax.to(mc, 2, {x:dest.x, y:dest.y}), TweenMax.to(blackfadeout, 1, {alpha:1, delay:2, onstart:clearLine, onComplete:endStop}) ], 0, TweenAlign.SEQUENCE); function drawLine() { line.graphics.lineTo(mc.x, mc.y); } function endStop() { trace("End of Tween"); gotoAndPlay(20); } function clearLine() { line.graphics.clear(); }

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

Obviously addChild(mc1); works on a single clip, but how would I bring the current movie clip in the sequence to the front? Thanks. Here's my code. var mcArray:Array = new Array(mc1,mc2,mc3,mc4,mc5); var timeline:TimelineMax = new TimelineMax({repeat:1}); timeline.insertMultiple (TweenMax.allTo(mcArray, 2, {bezierThrough:[{z:0}, {z:-200}, {z:0}], orientToBezier:false, ease:Linear.easeNone}, 1));

I'm pausing timelines with pause() and resuming them with resume(). However, is as if the timeline is dragged out when it resumes, and labels no longer line up with the tweens contained in the timeline. I've traced most of the properties, and the only ones that seem to be different are duration and totalDuration which are increased by the amount of time spent while the timeline was paused. The startTime does not change. Is this behavior normal? How can I make it so that my tweens and timelines are the right length and the labels line up after pausing and resuming? At the same time, I'm also calling TweenMax.pauseAll() and TweenMax.resumeAll(), could this be affecting the timelines(I did not give them any parent)? I'm using AS3 version 1.64 of the Tweening Platform v11. Thanks for any help.