Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...

Search the Community

Showing results for tags 'timeline'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


Forums

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

Product Groups

  • Club GreenSock
  • TransformManager
  • Supercharge

Categories

There are no results to display.


Find results in...

Find results that contain...


Date Created

  • Start

    End


Last Updated

  • Start

    End


Filter by number of...

Joined

  • Start

    End


Group


Personal Website


Twitter


CodePen


Company Website


Location


Interests

  1. 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.
  2. 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 !
  3. 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!
  4. 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!
  5. 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.
  6. 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?
  7. 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.
  8. 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/
  9. 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) )
  10. 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
  11. Jan

    Timeline play(From)To

    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
  12. 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() );
  13. 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(); }
  14. 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));
  15. 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.
  16. 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.
  17. I am trying to create a timeline that is populated with content from an xml source. My questions are: How do I fade out the previous mc for the next mc? How do I restart the whole she-bang after the mcs have been populated? How do I reset the timeline when the xml file is updated? function loadTaglines():void { for ( var i:uint = 0; i < xml.length(); i++ ){ var tagline = new mc; tagline.txt_tagline.text = xml.tagline[i] tagline.x = 816; tagline.y = 47; tagline.scaleX = 4; tagline.scaleY = 4; tagline.alpha = 0; addChild(tagline).name = tagline + i; timeline.append( new TweenLite (tagline, .5, {scaleX:1, scaleY:1, alpha:1) ); } }
  18. One more question about pause behaviour of timelines and tweens: if you do the following: var tl = new TimlineMax({paused:true}); var tween = new TweenMax(element, duration, {someVars, paused:true}); // pause the tween upon creation tl.insert(tween); tl.play(); // ==> nothing happens Isn't the timeline supposed to play the containing tweens? If I only pause the timeline upon creation and not the tween, that will be inserted afterwards, everything works fine. I think that the timeline should overwrite the paused state of it's containing elements. Thanks for a short hint! Bastian
  19. Hi, just wanted to let you know that it seems that clear() on a timeline does not remove eventCallbacks. It doesn't matter if they are set by the constructor or afterwards with eventCallback('eventtype', function) I'm using latest Chrome and the latest TweenMax & TimelineMax JS versions on Windows 8 (shouldn't matter) just try the following: var tl = new TimelineMax({onComplete: function() {console.log('complete');}}); tl.eventCallback('onComplete'); //returns function tl.eventCallback('onReverseComplete', function() {console.log('reversed');}); tl.clear(); tl.eventCallback('onReverseComplete'); // still there tl.eventCallback('onComplete'); // still there Although eventCallbacks get not killed, the containing tweens and timelines are removed and the totalDuration is 0 afterwards. Would be nice if someone could confirm that!
  20. Hello, It's has been some time since I don't post here so I'll seize this oportunity to thanks again the greensock comunity for this great free framework. I've been trying to do something easy: An animation of an sprite being pulled down from the bottom of the stage, and then pushed down again. Some simple transition. I have 2 functions for that (they use speed instead of seconds) public static function pushDown(target:DisplayObject, onCompleteFunction:Function = null, onCompleteParams:Array = null, speed:Number = 1200):TweenLite { var distance:Number = stageHeight - target.y; var duration:Number = distance / speed; trace("PUSH: target.y = " + target.y + " distance = " + distance); return TweenLite.to(target, duration, { y: target.y + distance, onComplete: onCompleteFunction, onCompleteParams:onCompleteParams, ease:Linear.easeNone } ); } public static function pullDown(target:DisplayObject, onCompleteFunction:Function = null, onCompleteParams:Array = null, speed:Number = 1200):TweenLite { var distance:Number = stageHeight - target.y; var duration:Number = distance / speed; trace("PULL: target.y = " + target.y + " distance = " + distance); return TweenLite.from(target, duration, { y: target.y + distance, onComplete: onCompleteFunction, onCompleteParams:onCompleteParams, ease:Linear.easeNone } ); } The problem comes when I use them in a simple timeline: var timeline:TimelineLite = new Timeline({paused:true}); timeline.append(SlideAnimations.pullDown(object)); timeline.append(SlideAnimations.pushDown(object)); // play will takes place within a listener handler function (ON_ADDED_TO_STAGE), but ill simplify it timeline.play(); What I have realized (tracing the y property of the object being tweened) is that before the timeline is created, the object has y = 0. But then after appending the first tween, the y property of the object is changed. I didnt expect this to happen. Shouldn't the property being tweened change during/after the tween is taking place? In other words, the first tween (TweenLite.from) should not change the Y property of the object being tweened until the timeline starts to play, but what I have seen is that it gets changed just after adding it to the timeline. I hope what im trying to explain is understandable, if not, ill add more details. Thanks for your time. Héctor
  21. The following animated perfectly. All is well. But when I go to REVERSE() the timeline, the ball fades out, but never back in, and continues back to original starting spot at opacity = 0. Why is this? Thanks -Thomas function fadeIn(obj){ var tl = new TimelineMax(); tl.append(TweenMax.to(obj, duration, {css:{opacity:1}, ease:Linear.easeNone})); return tl; } function fadeOut(obj){ var tl = new TimelineMax(); tl.append(TweenMax.to(obj, duration, {css:{opacity:0}, ease:Linear.easeNone})); return tl; } var ball = document.getElementById('ball2'); var tl = new TimelineMax({}); tl.append(TweenLite.from(ball, 12, {css:{marginLeft:900},delay:1})); tl.append(fadeOut(ball)); tl.append(fadeIn(ball));
  22. Greetings, I'm trying to coordinate events using timeline, but not getting things to unfold as I envision them. I have 26 different events which, when one is done, the next unfolds. This works as expected. What I want to do is at the end of each of those 26 events, another event triggered which continues on it's own independently and does not slow down the original 26 events. That is, Event 1 happens and when it stops it normally goes to event 2, but instead I want it to trigger event alt_2 and event 2 simultaneously; at the end of event 2, trigger event 3 and event alt_3 simultaneously, etc. I drew an ascii file which may be more helpful (see attached png image). [image removed] I tried using nestedTimeline, but no matter how meticulously I timed (using delay), the events did not remain coordinated. They started out so, but halfway through they lose coordination. Thank you in advance, Steven edit: I am using Actionscript 2.
  23. Greetings, I'm currently in the process of choosing a transform tool and I've narrowed it down to three: GreenSock, Sencoluar, or Boceto. Some questions I have about the GreenSock tool: 1) How easy is it to make modifications, for example "skin" the controls appearance? I'd like to use a vector image for my resize/rotate handles rather than the generic blocks and I'd like to get rid of the rectangular box. I like that Senocular's controls are easy to derive a class from an individual control and just override the draw method. Is that easy to do with Greensock too? Are the methods that draw the controls exposed for overriding? I'd like to make transitions to future versions of the base code as easy as possible, but I foresee fairly heavy modification so I'm looking for something where I can use OOP principles to isolate the base functionality from my derived code. 2) Are their any integrations between the Transform tools and the Tweening/Timeline tools? I'd love to, for example, be able to "record" various transform states and save tweens between those positions to a timeline. Functions in the tweening tools that would let me add a transformitem derived control to a timeline and create a tween to it's current position (from the last recorded position) would be extremely useful, for example. If not currently available, is this a possibility for the future? 3) I notice that SVN access is mentioned for the tweeningtools but not the transform tools. Some form of version control would really make handling updates easier for me (especially if I end up having to modify the base classes). Is source control access available for easy upgrades? 4) Any other comparison or comments on features that differentiate these tools are appreciated. One pro for the Greensock tool that comes to mind is multiselect (and it appears to be very well supported 5) Are there public Roadmaps for the TransformTool anywhere? Thanks! --scotru
  24. how can i do reverse from specific scale/time/point in my timeline?
×