Search the Community

THIS THING IS DRIVING ME MAD .. PLEASE HELP ! var w = 25; var timeline = new TimelineMax(); var mc1 = new TweenMax(); var mc2 = new TweenMax(); timeline.add( [ mc1.to($('#selector'), 10, {backgroundColor:'red'}), mc2.to($('#selector'), 2.5,{width: w+"%", onComplete: function(){ timeline.pause() }}) ],0,0); // so currently the animation pauses at 2.5 secs instead of 10 // how do i alter mc2's tween now that it has finished, with it staying in the same timeline // I tried this .. (it doesnt work) timeline.append( mc2.updateTo($('#selector'), 5, { width: "50%", onComplete: function(){ timeline.pause()} }, false) );

var tm = new TimelineMax(); var bgTween = new TweenMax(); var barWidthTween = new TweenMax(); var groupCount = 4; var clickCount = 0; var animationTime = 5; // seconds var targetSelector = '#statusBar'; var splitTime = animationTime / groupCount; //1.25 second jQuery('#target').click(function(){ clickCount++; // this will basically eval to 25%, 50%, 75% & 100% var animWidth = ((100/groupCount)*clickCount); switch( clickCount ){ case 1: tm.add([ bgTween.to(jQuery(targetSelector),animationTime ,{backgroundColor:'#454545', onComplete: resetCSS}), barWidthTween.to(jQuery(targetSelector),splitTime ,{width:animWidth+"%", onComplete: pauseAnimation}) ],0,0); break; default: // presumes first click/case has already been met (this is the part thats not working) tm.append( barWidthTween.to(jQuery(targetSelector), splitTime,{width:animWidth+"%", onComplete: pauseAnimation}) ); break; } }); Note: var "barWidthTween" has a callback after the 1.25 second execution to pause the whole timeline before the var "bgTween" has finished. [ it should still have another 3.75 sec's left ] "WHAT IM TRYING TO ACHIEVE" A colour bar that changes colour over a 5 second period, while that same bar increases in size on every click. "hense the need for the pause every 1.25 seconds" I need to be able to reverse this motion also which is why im not using multiple TimelineMax instances. I hope I've made my problem clear and if not, i'll try and add some clarity.

I am using TimelineMax for a project and I was wondering is there was a way to possibly update the CSS attribute of a Tween by calling it's label? For example my tween would look like: var tl = new TimelineMax({paused:true}); tl.to(element, time, {css:{top: -50px}}, "my-label"); I would like to possibly call this tween by it's label and update the CSS property to a new value. I tried something like this, but I had no success. tl.removeLabel("my-label"); tl.insert(TweenLite.to(element, time, {css:{top:-100px}}), "my-label"); Any help would be appreciated.

Hi. I'm a Flash guy that's been dabbling in HTML5/Javascript stuff off and on for about a year now. Here's what I'm trying to accomplish: Eight circles of different colors animating in to form a ring (using a bezier curve) with the bottom circles overlapping the top ones (seen in circles.png) Once animated in to position, clicking on one of the circles will animate them until the clicked circle is at the bottom. The layers/zIndex will distribute correctly to match the original layout. I'm using TweenMax right now to animate the intro and it works pretty well. However, I'm using setTimeout to stop the animations so they stop when they get to the "correct" position to form the ring. This is a little finicky, as they will stop in slightly different positions each time. This leads to my first question: is there a better way stop the animations so the circles stop evenly along the ring? The other part of this is how I'm going about it. Eventually I'll want the animations to go back and forth simultaneously when you click a circle and i'm wondering: will this be done easily using functions of TweenMax like reverse or will TimelineMax be better for this situation? One last question... Here is some of my code: TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:{ curviness:1.5, values:[ {left:100, top:100}, {left:75, top:75}, {left:100, top:50} ] } }, ease:Linear.easeInOut } ); I use the bezier line a few times and I'm wondering if I can simplify it by doing something like: var bez1 = BezierPlugin.bezierThrough([{left:100, top:100}, {left:75, top:75}, {left:100, top:50}], 1.5); TweenMax.to( circleArr[0], .5, { css:{ zIndex:0, bezier:bez1 }, ease:Linear.easeInOut } ); I'm submitting a zip file with my work so far. Let me know if you have any suggestions or questions about what I'm trying to do. Thanks! Test.zip

I was wondering about the best way to handle a jQuery resize event when a user resizes the browser window. I am using TimelineMax and currently I am pausing the timeline, moving it to the very start of the timeline and then removing the timeline object, initializing a new one and rebuilding the timeline each time the browser resize event is fired. I was thinking there might be a better way to do this. I found this answer on StackOverflow here. Having said that, this solution works, but it moves the timeline to the start every time. If I try and resize the window and pause the timeline at the current time of the label it gets thrown off? If I simply try and remove the timeline and rebuild it with a new object, it gets thrown off also? I had seen something about a liquid stage? Is this available on the JS version, or maybe there is something I am overlooking? Here's my resize code: $window.on('resize', function(){ var time = 0; if(globalLabel != "") time = controller.tl.getLabelTime(globalLabel); //time would be used to pause the timeline but it does not work clearTimeout(id); controller.tl.pause(0,true); controller.tl.remove(); //on the Update view call, I am creating a new timeline object //and rebuilding the timeline id = setTimeout(controller.UpdateView, 150); }); I appreciate any help.

hi Greensock A few questions reagrding killAll() 1) Where did the last parameter go? In Flash : killAll(complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true):void vs. Docs : killAll(complete:Boolean = false, tweens:Boolean = true, delayedCalls:Boolean = true, timelines:Boolean = true):void 2) TimelineMaxs onComplete fires after TweenMax.killAll();??? package { import flash.display.Sprite; import com.greensock.TweenMax; import com.greensock.TimelineMax; import com.greensock.plugins.*; import com.greensock.easing.*; import com.greensock.events.TweenEvent; TweenPlugin.activate([ScalePlugin]); import flash.display.MovieClip; public class Main extends Sprite { public function Main() { // constructor code super(); Create(); } private function Create() { var arr:Array = new Array(); var Time:Number=2; for (var i:int=0; i<10; i++) { var m:MovieClip = new mc(); this.addChild(m); m.x = 40+(25*i); m.y=50; arr.push(m); } // solo tween var TM:MovieClip = new mc(); this.addChild; TM.x=40; TM.y=100; TweenMax.to(TM,6,{scale:2, ease:Linear.easeNone, onStartListener:ScaleTM, onComplete:CompleteTM }); // timeline var TL:TimelineMax = new TimelineMax({ onComplete:CompleteTL }); TL.insertMultiple(TweenMax.allTo(arr, Time, {scale:2, ease:Linear.easeNone, onStartListener:ScaleTL }, Time-0.5), 0); // delayed kill TweenMax.delayedCall(4,Kill); } private function ScaleTM(e:TweenEvent): void { trace('onStartListener: ScaleTM'); } private function CompleteTM() { trace('CompleteTM'); } private function ScaleTL(e:TweenEvent): void { trace('onStartListener: ScaleTL'); } private function CompleteTL() { trace('CompleteTL'); } private function Kill() { trace('Kill'); TweenMax.killAll( } } } trace is:onStartListener: ScaleTM onStartListener: ScaleTL onStartListener: ScaleTL onStartListener: ScaleTL Kill CompleteTL After killAll: As U can see TimelineMax onComplete fires but TweenMax onComplete dosn't

Hi, I am having trouble getting onUpdate event to fire in a TimelineMax that I have nested inside of another TimelineMax. Basically i have a "master" timeline, and a bunch of different "section" timelines. The master timeline has its own onUpdate , but I would like the onUpdate for each of the different sections to call a different function. for example... var master = new TimelineMax( {paused:true, onUpdate:masterUpdate}); var sec1 = new TimelineMax({paused:true, onUpdate:sec1Update}); var sec2 = new TimelineMax({paused:true, onUpdate:sec2Update}); master.add([sec1, sec2], "+=2", "stagger"); master.play(); The problem I am having is that sec1Update, and sec2Update are not getting called when their respective timelines are being played. Any help would be greatly appreciated. Thanks Greg

Hi. I declare var cacTimeline; as global variable. I then use it like this in function1 for example : function1 () { cacTimeline = new TimelineMax(); cacTimeline.to($linePath,0.5,{height:300}); ...... } I then want to reverse it in function2 and have a onReverseComplete or some callback at the end. But for the sake of my app , I have to append this callback in function2 , not in the object declaration. function2 () { cacTimeline.addCallback(callback_function_name,0); cacTimeline.reverse(); } Fires the callback_function_name twice. One at the start of the tween , one at the end of the sequence. function2 () { cacTimeline.addCallback(callback_function_name,cacTimeline.totalDuration()); cacTimeline.reverse(); } callback_function_name never fires. Can anyone help me. I'm new to this , maybe there is a better solution for this.

Big thank you to everyone that makes this forum such a huge asset. I'm having an issue with a Kiosk I'm working on. Basically i've built it with each "slide" on its own flash timeline frame. For each flash timeline frame I have a GS timelineMax to make everything awesome. My issue is that when jumping to the next flash frame I get a momentary "flash" or blink of the content that is set to animate .from. it quickly goes away but is really unsightly. here's an excerpt. any help would be greatly appreciated. var timeline1:TimelineLite = new TimelineMax({ onComplete:goToTwo}); timeline1.append( TweenMax.from(FR1.MFPS, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: 1})); timeline1.append( TweenMax.from(FR1.p1, .5, {autoAlpha:0, rotationY:90, transformOrigin:"left top", ease:Quint.easeIn, delay: .5})); timeline1.append( TweenMax.from(FR1.Ba, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: -.05})); timeline1.append( TweenMax.from(FR1.p2, .5, {autoAlpha:0, rotationY:90, transformOrigin:"left top", ease:Quint.easeIn, delay: .5})); timeline1.append( TweenMax.from(FR1.ser, 2, {autoAlpha:0, rotationX:90, transformOrigin:"left top", ease:Elastic.easeOut, delay: -.05})); timeline1.append( TweenMax.from(FR1.equals, 1,{scrollRect:{x:0, y:0, width:0, height:140}, ease:Expo.easeInOut, delay: 0 })); function goToTwo(){ this.gotoAndStop(2); } stop();

I have a scrolling set of thumbnails that is fed from a backend — thus a varying amount of images. These are masked by a div with overflow:hidden. The thumbnails scroll left and right depending on where mouse is over them (left or right) and also with two external arrows: mouseOver over the arrows scrolls the thumbnails left and right. I set up the entire thing as a TimelineMax. Very nice -- play from 0 to 1 depending or reverse it, if I want to go the other way. The issue I'm running into is making this work on an iPad. The client doesn't want me to invest the time into setting it up for full touch responsiveness, which I recommend — so my only thought is to scroll based on the arrows. — MouseDown doesn't work — just asks if I want to download the arrow images — So I'm thinking: click — but given that I've got it all set up as a TImelineMax, how do I do this? I could of course just do a simple TweenMax a given number of pixels, but again, would like to tween, say, from TimelineMax progress 0 to, oh, 0.1 or something — I reckon I can calculate the appropriate amount given the total width of the images and the masking div — Anyway to move a TimelineMax in pieces like this? Would I do a TweenMax of the TimelineMax's progress() ?? Thanks for any help — and yes, I know I should do the touch interface, but the client needs to give the go ahead…

Hi, I am writing pretty simple game that utilizes MVC pattern. Model is calculating data stored in Array and dispatches events to View that tries to reproduce and visualize it. I wanted to implement View in the way that TimelineMax is handling the tweens by queing it up and play it at the certain point of time. Here is the mainLoop from Model public function mainLoop():void { applyBonus(bonuses); fall(); applyBonus(bonuses); dispatchEvent(new Event(BoardModel.PLAY)); } the function applyBonus or fall just dispatches appropriate events to View. The listeners to this methods just create Tweens and are adding them to the TimelineMax using the append method. The problem is that each on this tweens has a its onComplete method. I want to make sure that not only twees are executed in correct order but also onComplete. Currently I have: applyBonus tween fall tween applyBonus onComplete fall onComplete I wish to have: applyBonus tween applyBonus onComplete fall tween fall onComplete etc. How can I achieve something like this?

Hi, this is my first post as I just started to play with Greensock and so far it has been really useful Im just having a hard time trying to figure out a couple of things. Iets say I add an element to my timeline var tl = new TimelineMax(); tl.to($("#element"), 8, {css:{left : 100}, onUpdate:detectSomethingChanged}); This element is positioned through CSS in a default location then it starts to move. Now whats happening is that my callback function detects if the mouse is on top of my element, if so, it fades it away : tl.to($("#element"), 2, {css:{opacity : 0}, overwrite:"all"}); and as soon the fading stops I want the animation to start all over again from 0 when I do restart but this only restarts the fading effect not the entire clip since I used overwrite:"all". How should I do this exactly?

Hello, I'm trying to animate a rectangle created with KineticJS, however I keep getting "Uncaught TypeError: Cannot read property 'setX' of undefined" the code is the following: var scrub = new Kinetic.Rect({ x: 0, y: 0, width: 4, height: 120, fill: '#ff3019', draggable: true, id:'scrub', name:'scrub', dragBoundFunc: function(pos) { return { x: pos.x, y: this.getAbsolutePosition().y } } }); TimelineMax({paused:true}); tl.insert(TweenMax.to(scrub,5,{css:{setX:500},onComplete:function(){ console.log('to 500'); }})); tl.insert(TweenMax.to(scrub,5,{css:{setX:800},onComplete:function(){ console.log('to 800'); }})); tl.play(); Do you guys have any idea why is this throwing an error? Thanks in advance!

Hi, Let me congratulate GreenSock for the hard work and success. My question is, how to do next and previous in TimelineMax. ? I am able to play,pause,reverse and resume but how to go to the next/previous frame of the animation? any help will be highly appreciated.

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!

Adding autorotate to my bezier curve stops it from working in Safari (5.1.7) It just pins around in one spot and doesn't follow the curve. Removing the auto rotate parameter fixes it. Anyone any ideas?! Can't find anyone with this problem and not sure what to do about it, I really need it to auto rotate with the curve. Works in all other browsers! var anim = new TimelineMax(); anim.append(TweenMax.to($('#anim'), 2, {css:{bezier: {values: [{left:'3578px', top:'2417px'},{left:'3431px', top:'2362px'},{left:'3190px', top:'2252px'}], autoRotate: true}}, ease: Linear.easeNone}));

I'm experiencing a problem only on ios, Safari and Dolphin. When the page first loads, the TimelineMax animation will not play. If I tap somewhere on the screen (not on a button) or reload page, everything plays. I cannot seem to figure this out and I have tired rearranging the order of the way the page loads and to no avail, nothing works unless I reload the page or tap on the screen in a random spot. I checked the console.log and no issues. I could really use a bit of help on this one. URL: Works on: DESKTOP: Safari, Chrome, FF and Opera Broken on: iOS: Safari and Dolphin

Hi everyone, I'm new on this forum, first thanks to Greensock for the awesome library. But... I have a serious problem with the timelineMax. What i want to do: - declare 2 or more timelineMax's with tweens on the same target - calls multiple times in a short time the gotoAndStop method on a (random) timeline. - the latest gotoAndStop must overwrite every other tweens or timelines. The problem is that mostly the latest timelineMax.gotoAndStop is not set. You can see a simple example of my problem in my attachment. Just publish the fla with and without the comments on line 22 to 32. The result should by the same... but it isn't. Can someone help me with that? (I'm sorry for my bad English) Thank you, Pieter example.zip

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

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

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.

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

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

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>

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.