Jump to content

Search the Community

Showing results for tags 'TimeLineMax'.

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


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

Product Groups

  • Club GreenSock
  • TransformManager

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start





Website URL







  1. I'm having an issue with sequencing some animations. I would ultimately like the duration of the timeline to be equal to 2 seconds but only have the following objects animate at specific points in the first second. Goals: 1. Duration of TimelineMax = 2 seconds 2. Specifically time the elements to start and finish there animations within the first second. 3. Loop timeline So far I have the loop working and all animation running. the problem is that the duration is not 2 seconds long. I could really use some help straightening this out. Thank you in advance. tl1.insertMultiple( [ TweenLite.fromTo( byId("bac0"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:0,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("pill0"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:159, left:619}} , {css:{autoAlpha:1,rotation:-360, top:159, left:649}} ), TweenLite.fromTo( byId("bac2"),.2, {css:{autoAlpha:1,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:0,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("pill2"),.2, {css:{autoAlpha:0,scale:.80,rotation:360, top:360, left:600}} , {css:{autoAlpha:1,rotation:360, top:410, left:500}} ), TweenLite.fromTo( byId("bac4"),.2, {css:{autoAlpha:1,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:0,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("pill4"),.2, {css:{autoAlpha:0,scale:.40,rotation:10, top:530, left:435}} , {css:{autoAlpha:1,rotation:-720, top:600, left:300}} ), TweenLite.fromTo( byId("bac6"),.2, {css:{autoAlpha:1,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:0,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("pill6"),.2, {css:{autoAlpha:0,scale:.70,rotation:10, top:330, left:140, delay:.2}} , {css:{autoAlpha:1,rotation:330, top:222, left:100}} ), TweenLite.fromTo( byId("bac8"),.2, {css:{autoAlpha:1,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:0,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("pill8"),.2, {css:{autoAlpha:0,scale:.60,rotation:360, top:90, left:259, delay:.2}} , {css:{autoAlpha:1,rotation:360, top:90, left:240}} ), TweenLite.fromTo( byId("bac10"),.2, {css:{autoAlpha:1,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:0,rotation:-225, top:270, left:440}} ), TweenLite.fromTo( byId("pill10"),.2, {css:{autoAlpha:0,scale:.90,rotation:360, top:280, left:440, delay:.2}} , {css:{autoAlpha:1,rotation:-225, top:270, left:440}} ) ],0, "normal",.1 );
  2. Ok, I am pretty new to this flash / actionscript so please help me get on track... I am trying to do the following: FirstSwf -- contains a timelinemax that animates a text from left to right SecondSwf -- contains a X number of photos that fade in and fade out with Y animation duration (number of images is dynamically parsed via XML configuration) ThirdSwf -- contains a timeline that animates a text from bottom to top (sort of like credits screen) Main.swf -- This is where I am stuck. I want to load the three SWF's into a master timeline inside main.swf and than sequentially play them one by one. I am able to load these swf's using LoaderMax but I can't seem to figure out two things: 1. How do I play them in sequence? 2. How do I control the sub timelines (within these external swf's) via the master timeline? Any help would be appreciated! Thanks
  3. Hey guys... This is my first post to this forum... I am working on a project and i want to have a tweening effect similar to the 'Custom Presets : fly-in pause fly-out' option in Flash IDE. Its just that i want to create it with action script and want to control it properly through code. For the rest of the tweening in my project i am using 'Greensock's TweenMax'. So if someone can help me creating the same effect in this engine it would be helpful. Thanks.
  4. Hii I'm loading in a swf animation with a couple of frame scripts embedded on the loaded swf timeline. I managed to load in the swf, place it into a TweenMax instance, and placed that TweenMax instance into a TimelineMax instance so I can control the playback. The only issue I'm having is that the swf animation frame scripts are not firing off. This is an example of how I'm setting up the above: // This occurs after the swf is loaded var intro = LoaderMax.getLoader("transition_intro").rawContent; var introTransition:TweenMax = new TweenMax(_intro, _intro.totalFrames, { useFrames: true, frame: _intro.totalFrames, ease: Linear.easeNone } ); var timeline:TimelineMax = new TimelineMax( { useFrames:true, paused:true } ); timeline.append(introTransition); timeline.play(); Is there a way to have the loaded swf run a frame script on the defined frame (like mc.gotoAndPlay(0) or am I setting up this wrong? Cheers
  5. Could someone lend me some knowledge?!! Is it possible to take this addLabel string: overviewtl.addLabel("Sequence 01", overviewtl.duration); and have it update a dynamic text box on the stage. It's for client editing purposes, so they can have a reference to the sequence name within a long timelineMax build. My knowledge of AS3 really lets me down sometimes, but I usually manage from Carl's tutorials and the forums here to get what I need to work. This case, I'm stumped! I've already built in the progress bar and slider + play pause functions which all work a treat - this final bit would be the icing on the cake! Thanks in advance, Merrick
  6. I'm having a ton of trouble trying to use TimelineMax for JS. I cannot get it to work at all. I must be missing something (if not a few things). I am trying to use the appendMultiple and insertMultiple methods, but nothing seems to be happening. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Tweening</title> <link type="text/css" href="exts_css/objects2Move.css" rel="stylesheet" /> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/easing/EasePack.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TweenLite.min.js"></script> <script type="text/javascript" src="exts_js_global/thirdParty/greensock-v12-js/src/minified/TimelineMax.min.js"></script> <script> var r = document.getElementById("tiny"); function hello() { TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut}); } var tl = new TimelineMax(); tl.append(TweenLite.to(r, 1, {css:{top:"200px", left:"450px", backgroundColor:"#FF0000"}, ease:Power2.easeOut})); function animateAll(){ tl.play(); } </script> </head> <body> <div id="tiny"> help </div> <a href="#" onclick="animateAll()" style="left:220px; position:absolute;">Press me</a> </body> </html>
  7. I got a TimelineMax which repeats non stop (repeat = -1) UNTIL a certain event happens. When that happens, what I want is the animation to STOP REPEATING. Unfortunately, setting repeat to 0 also resets the "playhead" to 0 instead of waiting for the current animation to finish. I don't know if there is another method to do this. Also note that I'm using the OLD animation platform (2012-06-30 / TimelineMax 1.698). To accomplish my task, I had to make "_cyclesComplete" in TimelineMax publicly accessible (via property). Then: tl.repeat = tl.cyclesComplete; So the suggestion is to take care of this issue so that it is no longer an issue ::- D.
  8. Hi Is there a way to to add a listener when the timelinemax instance reaches a label or would I have to use TimelineMax.currentLabel on the onUpdate to see the label change? Thanks!
  9. Hi there! I find there's something I'm not quite grasping using TimelineMax and fromTo, been trying all sorts of different variations, but shouldn't this work? Or am I missing something critical here? timeline = new TimelineMax(); timeline.append(TweenMax.fromTo(element, 1, {css: {left: "100", top: "100"}}, {css:{left:"130", top: "130"}} )); Appreciate all the help I can get, thanks!
  10. I'm propably missing something stupid >_< . My code is very simple: mainTimeline = new TimelineMax( { onComplete: test() } ); mainTimeline.append(TweenMax.from(header,2,{x:-header.width})); Why on earth "test()" function would fire instantly without waiting for tween to end? What am I missing? Regards. Luken
  11. Hi. I'm creating a project that uses TweenLite to tween easel properties. Everything goes right all the time, except for when I try to user TimelineMax.insert() to insert a tween (that doesn't tween any properties, but that I add to keep a reference to the object and to add the onUpdate-events the whole time the object should be on the easel Stage) at a certain point in my code. At all the other points in my code where I use insert() to insert a tween at a certain position, everything goes right, but not at one point. I keep getting the error Uncaught TypeError: Cannot read property '_time' of null at line 564 of TimelineMax.js.. At this line this.timeline == null. I've logged the other times I use insert() and this.timeline is never null. Also, I logged the object and it's properties, and they are also all not null or undefined. I'm pretty stuck, do you have any idea? Thanks! (For reference, the insert code i use:) this.timelineMax.insert( TweenLite.to( object.easel, object.duration, { } ), object.start );
  12. I know you can set a defaultEase for TweenMax, but how can I set it for a TimelineMax? I've tried... var tl = new TimelineMax({defaultEase:Power2.easeInOut}); ...and other variations but nada happens. Is it possible? Thanks
  13. Hey Guys, The TimelineMax method getLabelsArray() will not work for me. Here is a super simplified version... var tl = new TimelineMax(); tl.append('start'); tl.to($('#elem'), .5, {css:{top:'200px'}}); console.log('yo'); // This one shows in console var labels = tl.getLabelsArray(); console.log('yo2: ' + labels[0].name); // This does not Has anyone been able to get this to work? All I'm really trying to do is play a label by index, and this is the only way I can see to do it. Thanks for any help
  14. Berry

    IE issue

    I am new to both Jquery and TweenMax but so far I love using TweenMax js. I took the code from http://www.snorkl.tv...script-preview/ exploding bunnies example and tweaked it a bit to get a effect of multiple rain drops falling on the screen. It looks good in firefox, chrome and safari but in ie 7 and 8 (I don't currently have access to ie 9) it is not displaying correctly. There is only 1 rain drop displaying and it is grey instead of the white png. Also I have it paused when loaded and have a click event to play the tween but it is playing upon load. Any ideas of what I am doing wrong? here is my code: var rainDrops = $(".rainDrop"); var frame3Tl = new TimelineLite({paused:true}); rainDrops.each( function (index){ var delay = 1 + (Math.random()*2); var duration = 1 + (Math.random()*3); var left = 7 + (Math.random()*840) + "px" var rainDrop = $(this); $(this).css({'left': left}); frame3Tl.insertMultiple([TweenMax.staggerTo(rainDrop, duration, {css:{rotation:1}, ease:Power1.easeOut, delay:delay, repeat:-1}), TweenMax.staggerTo(rainDrop, duration, {css:{rotate:"1deg", top:"504px"}, ease:Linear.easeNone, delay:delay, repeat:-1}), ]); } ) Thanks for your help!
  15. Hi greensocks, I'm creating an animation sequence for an element in a site that I'm trying to get to start once the whole div has loaded. My difficulty isn't in starting the animation but in having the entire animation play. From my understanding of TimelineMax, each animation will play in order so if the 1st animation in the timeline doesn't execute, the following animations won't either. Am I wrong in that understanding? Here's what I've got now: <script language="JavaScript" type="text/javascript"> function playBdayTimeline() { var bdaySurprise = document.getElementById("headline1"); var ourBday = document.getElementById("headline2"); var bdayPromoGift = document.getElementById("promoGift"); var bdayPromoDay = document.getElementById("promoDay1"); var timelineIntro1 = document.getElementById("timelineIntro1"); var timelineIntro2 = document.getElementById("timelineIntro2"); var timelineIntro3 = document.getElementById("timelineIntro3"); var promoDeal = new TimelineMax(); promoDeal.from(bdaySurprise, .7, {css:{autoAlpha:0, top:'-20px'}, ease:Quad.easeOut}); promoDeal.from(ourBday, .6, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoGift, .6, {css:{alpha:1, scale:2}, delay:-.4, ease:Quad.easeOut}); promoDeal.to(bdayPromoDay, .6, {css:{autoAlpha:1}, delay:-.1, ease:Quad.easeOut}); promoDeal.from(timelineIntro1, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.2, ease:Quad.easeOut}); promoDeal.from(timelineIntro2, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(timelineIntro3, 1, {css:{autoAlpha:0, top:'-15px'}, delay:-.4, ease:Quad.easeOut}); promoDeal.from(introSlider, .6, {css:{autoAlpha:0, }, ease:Quad.easeOut}); } </script> From the above, the second half of the timeline (bottom four of the promoDeal timeline) animate in beautifully smooth sequential order. However, they do so after the first half of the timeline just "pop" in... no animation whatsoever. If I change any of the properties in the first four lines (ie.change to scale: .5), they take but they don't animate so something seems to be working there... What's going on here? Why would only part of my timeline execute? Thanks for any ideas!!
  16. Hi guys, context: im creating an infographic where tv-ratings are being visualized. I have a huge TimelineMax where 1000 dots (mc's) are constantly being tweened. This timeline is attached to a standard Slider from the Flash Components. Now, if i let the timeline play, no errors occur. When i skip ahead or back in time, some dots (that were in the middle of tweening) just stop playing and just stand there half-way.... please check it out herrre: http://dominggus.nl/...fstuderen/temp/ this is what happens when you skip/drag the slider: switch(event.type) { case UIEvent.THUMB_DRAG: mainTimeline.goto(event.value, false); break; case UIEvent.THUMB_PRESS: mainTimeline.gotoAndStop(event.value, false); break; case UIEvent.THUMB_RELEASE: mainTimeline.gotoAndPlay(event.value, false); break; case UIEvent.SLIDER_CHANGE: if (!bottomSliderGUI.playMode) { mainTimeline.gotoAndStop(event.value, false); } else { mainTimeline.gotoAndPlay(event.value, false); } break; } mainTimeline is a TimelineMax, and for each dot/mc (viewer), this is being used: mainTimeline.insert(new TweenLite(viewer, 1, {x:target.x, y:target.y}),labelTime); who can help me? what seems to be the officer, problem?????
  17. I'm trying to get TimelineMax to Delay its start for 3 sec and it Doesn't work I used the methods listed in the Documentation, with no success. ill be glad for any help. This is the code I'm useing function stars_OP():void { var timeline_OP:TimelineMax = new TimelineMax(); var clips_OP:Array = getChildrenOf_OP(Object(this).phone_anim_mc.container2_mc); function buildTimeline_OP(e:MouseEvent = null):void { timeline_OP.gotoAndStop(timeline_OP.duration); timeline_OP.clear(); clips_OP = shuffleArray_OP(clips_OP); var a:int = clips_OP.length; while (--a > -1) { var Randsize_OP = Math.floor(Math.random()*(1-0+1))+0; var clip_poz_x_OP = clips_OP[a].x; var clip_poz_y_OP = clips_OP[a].y; var poz_x_Rand_OP = Math.floor(Math.random()*((clip_poz_x_OP+250)-(clip_poz_x_OP)+1))+(clip_poz_x_OP); var poz_y_Rand_OP = Math.floor(Math.random()*((clip_poz_y_OP+20)-(clip_poz_y_OP-5)+1))+(clip_poz_y_OP-5); timeline_OP.append(TweenMax.from(clips_OP[a], 0.5, {alpha:0, scaleX:Randsize_OP, scaleY:Randsize_OP,x:poz_x_Rand_OP, y:poz_y_Rand_OP, blurFilter:{blurX:20, blurY:20, quality:1}, ease:Expo.easeOut}), -0.24); } timeline_OP.gotoAndPlay(0); } buildTimeline_OP(); } I tried this [left]var timeline_OP:TimelineMax = new TimelineMax({Delay:3});[/left] and timeline_OP.Delay = 3;
  18. Is there a way to persist and restore a Timeline, something like the XML methods in the TransformManager? Or is this a feature that might be considered?
  19. Hello all, I'm trying to add multiple images to a blank movie clip on my stage using the addChild method in an array. After many hours I got it almost working. The only problem now is that all of my arrayed images tween at the same time. They don't stagger. Is there any way to take the code that I have done and have each image tween, then the next, and so forth? I also need the timeline to repeat indefinately after all arrayed images have finished (which is why I have nested timelines). Thank you! var myTimelineCardMain:TimelineMax = new TimelineMax({repeat:-1}); var sArray:Array = [] var imgBD:BitmapData=new card_28(315,355); var card1:Bitmap=new Bitmap(imgBD); card1.x = -315; card1.y = -355; var img1BD:BitmapData=new card_21(315,355); var card2:Bitmap=new Bitmap(img1BD); card2.x = -315; card2.y = -355; sArray.push(card1,card2); for(var i:int = 0; i < sArray.length; i++) { card_main.addChild(sArray[i]); } var myTimelineCard:TimelineLite = new TimelineLite(); myTimelineCard.insertMultiple([new TweenLite(card_main, 0, {y:467, x:920}), new TweenLite(card_main, 3, {rotation:-9, ease:Back.easeOut}), new TweenLite(card_main, 3, {delay:3, rotation:200, ease:Back.easeOut})], 0, "sequence"); myTimelineCardMain.insertMultiple([myTimelineCard], 0, TweenAlign.SEQUENCE, 3);
  20. I suspect that this topic has been approached in the past, but I want to bring my own 2 cents to the table (if you'll have my cents ::- D). Since we can add onComplete and other such callbacks upon construction, why can't we add it later directly in the instance (if we saved the reference to the instance of the TimeLine or Tween). For example, in my situation, I want to add an onComplete to a TimeLine, but only sometimes. It's clumsy to call the constructor in an if statement. I would prefer to call the constructor and append methods and only later add the onComplete event (or any other such events). Are you just saving space in the library? Because as far as I suspect, this would be a piece of cake to make. Could you perhaps advise how to implement this as an extension to your library? I'm thinking of extending the TimeLine class and add the properties myself. Size is not a concern for me (these days, for who is?).