Search the Community

Hi there, I have the following code on an animation: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; import flash.ui.Mouse; import com.greensock.plugins.TweenPlugin; import com.greensock.plugins.BlurFilterPlugin; TweenPlugin.activate([BlurFilterPlugin]); var tl:TimelineLite = new TimelineLite(); tl.insert(TweenLite.from(who_mc, .25, {x:420, blurFilter:{blurX:10}, ease:Quad.easeOut})); tl.insert(TweenLite.to(who_mc, 1, {x:140, delay:.25})); tl.insert(TweenLite.to(who_mc, .5, {x:-126, ease:Quad.easeIn, alpha:0, delay:1.20})); tl.insert(TweenLite.to(black_mc, .5, {x:-161, ease:Quad.easeOut, delay:1.5})); tl.insert(TweenLite.from(grab_mc, .5, {x:-120, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.to(grab_mc, 1, {x:168, delay:2.45})); tl.insert(TweenLite.from(by_mc, 1, {x:437, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.to(by_mc, 1, {x:140, delay:2.45})); tl.insert(TweenLite.to(by_mc, .5, {x:-121, delay:3.4, ease:Quad.easeIn, alpha:0})); tl.insert(TweenLite.to(grab_mc, .5, {x:423, delay:3.4, ease:Quad.easeIn, alpha:0})); tl.insert(TweenLite.to(img1_mc, .5, {y:-126, delay:3.9})); tl.insert(TweenLite.from(img2_mc, .5, {y:384, delay:3.9})); tl.insert(TweenLite.from(white_mc, .5, {x:-95, delay:4.4})); tl.insert(TweenLite.from(labor_mc, .25, {x:-72, ease:Quad.easeOut, delay:4.9})); tl.insert(TweenLite.from(sale_mc, .25, {x:-72, ease:Quad.easeOut, delay:5})); tl.insert(TweenLite.from(clearance_mc, .25, {x:-72, ease:Quad.easeOut, delay:5.1})); tl.insert(TweenLite.from(rectangle_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.2})); tl.insert(TweenLite.from(percent_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.3})); tl.insert(TweenLite.from(save_mc, .25, {x:-93, ease:Quad.easeOut, delay:5.4})); tl.insert(TweenLite.from(save_btn, .25, {x:-93, ease:Quad.easeOut, delay:5.5})); tl.insert(TweenLite.from(blur_mc, .5, {alpha:0, delay:4.9})); function replayHover(e:MouseEvent):void{ TweenLite.to(replay_click, .5, {rotation:360}); } function clickReplay(e:MouseEvent):void{ tl.restart(); } replay_click.addEventListener(MouseEvent.CLICK, clickReplay); replay_click.addEventListener(MouseEvent.MOUSE_OVER, replayHover); replay_click.buttonMode = true; I'm using timelinelite on a replay button to replay all the animation - it works fine, and has always worked fine in the past (until recently) however it's not resetting the x value in the following two lines of code: tl.insert(TweenLite.from(grab_mc, .5, {x:-120, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); tl.insert(TweenLite.from(by_mc, 1, {x:437, blurFilter:{blurX:10}, ease:Quad.easeOut, delay:2})); The rest of the code is resetting perfectly. Any suggestions?

I'm trying to create a simple animation with a trigger button using TimelineLite(), but some how I got stuck... Here is my pen: http://codepen.io/vincentccw/pen/bfojB?editors=101 I can trigger the animation when I hover over the red square but not the button itself (since the animation is store inside the square instead of the button) Thanks for the help in advance

How do I set animation delay to using timelineLine? I have an animation that store inside slideUpTemplate instance /*========================================*/ var slideUpTemplate = new TimelineLite({ paused:true, onComplete:animationComplete, onReverseComplete:animationCompleteRev }); /*========================================*/ I've an button that will hover in and out event attached to it, and call slideUpTemplate.play() and slideUpTemplate.reverse() respectively. My problem is when I hover out I want the animation to delay for 1second before triggering the slideUpTemplate.reverse() method. My initial thought was to use slideUpTemplate.delay(1).reverse() but it only works for the 1st time.....

Hello everyone, I'm struggling to achieve the following sliding effect : When my mouse is over a box, I want that box to appear with a sliding effect. Right now I'm using TimelineLite, animating the "width" from 0 to 100px, as shown in the Jump start guide. The problem is I can't have the mouse over a 0px box... It works when I include this box in a div, I can now have the mouse over the div. BUT as soon as the box appears at 100px, the mouse isn't anymore over the div but over the box, resulting in an unwanted mouse out, looping the animation... Does anyone have got some suggestions to achieve this effect properly ? Thanks a lot !

My current project (JavaScript/GSAP) needs lots of tweening on different elements at the same time (it will be a heavily tweened/animated site). In "lots of" I mean 50-75 "TweenLite.to"s per click event, in total about 150-300 css properties to tween. It would be used all over the site on elements (buttons, menus, forms). Most of the elements will have 2 states, an "active" and an "inactive" state, basically when the user clicks on a menu, the menu will be activate, click again/elsewhere and goes to inactive. To efficiently manage the tweens, I would like to use TimelineLite, create all the tweens after the site loads and store them in 2 TimelineLite instances avoiding the "TweenLite.to"s again and again on each event/state change. - the "activateTimeline" and "inactiveTimeline" look like like this: var activeTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens with "new TweenLite(...)"s... ] }); var inactiveTimeline = new TimelineLite({ paused: true, tweens: [ ...an then lots of tweens again with "new TweenLite(...)"... ] }); This works really well. But there is a serious problem. When the user clicks rapidly or programatically change states BEFORE the finish ("onComplete") of the ongoing timeline, jumps and slowdowns will occur. This is not the case, when using "TweenLite.to"s on every event over and over again as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected. I have tried to use some conditions to somehow kill/invalidate the ongoing "old" timeline the let the "new" timeline on state change finish nicely as I would expect, also when starting over the timeline again: function activate() { if( !active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); // sometimes, on very rapid clicking/programatical state changes, mostly the headerTimelineActive.progress() will give a NaN if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( inactiveProgress > 0 && inactiveProgress < 1 ) { headerTimelineInactive.kill(); } if( activeProgress > 0 ) { headerTimelineActive.pause(0, true); } headerTimelineActive.play(); active = !active; } }; function deactivate() { if( active ) { var activeProgress = headerTimelineActive.progress(); var inactiveProgress = headerTimelineInactive.progress(); if( isNaN(activeProgress) || isNaN(inactiveProgress) ) { reinitializeTweens(); activeProgress = headerTimelineActive.progress(); inactiveProgress = headerTimelineInactive.progress(); } if( activeProgress > 0 && activeProgress < 1 ) { headerTimelineActive.kill(); } if( inactiveProgress > 0 ) { headerTimelineInactive.pause(0, true); } headerTimelineInactive.play(); active = !active; } }; ...but these methods did not help. Again, on rapid clicking/programatically state changes/click before the actual timeline "onComplete"s jumping, jittering and some sort of race/concurrent conditions occur. Here is a small CodePen demo. Please, give me some advice on what should I do/how should I do to use 2 "TimelineLite"s as I described and on state changes, somehow stop the "old" timeline and let the "new" timeline go. I wolud like to get the same effects/tweening experiences, when using just "TweenLite.to"s again and again (as the TweenLite system will override values and nicely finishes off tweens as naturally would be expected), but with 2 "TimelineLite"s. If I can get this to work with 2 timelines, there will be menus, when a 3rd state will be introduced, a "disabled" state with a 3rd TimelineLite. But currently, I am not able to do, what I wolud like to do with 2 timelines as I described. Thank you in advance, thank you all!

Hi - not sure what I'm doing wrong, but I've got an AS2 script here, and I'm building a sequence of tweens. All is well until I get to staggerTo - I am positive I'm giving it an array as its first property, but it keeps throwing a type mismatch. Here are the important bits: var introTl:TimelineLite; var btnsArr:Array; function init():Void { // activate TweenLight plugins TweenPlugin.activate([AutoAlphaPlugin, ScalePlugin, TintPlugin, RemoveTintPlugin]); // store the buttons in an array btnsArr = new Array(btn0, btn1, btn2); // play intro anim introAnim(); } function introAnim():Void { introTl = new TimelineLite({onComplete:onBoardAnim}); introTl.staggerTo(btnsArr, .5, {autoAlpha:0, scale:150, ease:Back.easeOut}, "-=.3"); //icons } function onBoardAnim():Void { trace ("onboard"); } I've even stripped this out and put it into a new file - same result. I'm sure it's something simple. Any ideas?

I have data that comes to me as milliseconds, and I was wondering if: a) there are any drawbacks to using `timeScale(1000)` in a TimelineLite instance to "simulate" milliseconds if it's a bug that I can attempt to set a child timeline at, say, 5000, but when I inspect the parent timeline it can appear at, say, 5002 (can, not always does, not consistently reproducbile) Thanks!

Hey to you all. I am very very new in Tweening and programming in general and studied a bit the past months. Have a small one running on my website www.casitadelcuco.es but can't find out how I can add a simple mouse over effect. I have this Tween : var myBannerTimeline = new TimelineLite(); myBannerTimeline.from('#vogelhuisje', 5, {css:{top:-500}, ease:Bounce.easeOut}) .from('#plank01', 1, {css:{left:-20,top:30}, ease:Bounce.easeOut}) .from('#plank02', 1, {css:{left:40,top:-50}, ease:Bounce.easeOut}) .from('#plank03', 1, {css:{left:-60,top:70}, ease:Bounce.easeOut}) .from('#plank04', 1, {css:{left:80,top:-90}, ease:Bounce.easeOut}) .from('#plank05', 1, {css:{left:-100,top:20}, ease:Bounce.easeOut}) .from('#gat', 1, {css:{opacity:0}}) .from('#schaduw', 2, {css:{top:600}, ease:Bounce.easeOut}) .from('#schaduw', 2, {css:{opacity:0.1}, ease:Bounce.easeOut}) .from('#webhuisje', 3, {css:{left:-800,opacity:0}, ease:Bounce.easeOut}); Now how can I make that when you go with your mouse over plank01 or plank02 or ... plank05, that all 5 elements go seperatly in 5 different directions. Just can not find it. Hope somebody wants to help me.

Hi there. Can someone demonstrate how I would pass a numerical value to positioning setting such as x or y that is set in a variable from an array using Tweenlite if possible? (tweenmax?) For example, the Flash tween version: var myNumber : Number = 0; var myArray : Array [30, 20, 10]; new Tween(instance_mc,"x",Regular.easeOut,instance_mc.x,myArray[myNumber],1,true); Thanks for any help!

Hi there. This question isn't limited to Greensock but was hoping I could get a little help here. I have an image scroller that basically uses buttons to relatively position a movieclip containing a horizontal line of images. There is a mask over an area so that when you click a left or right arrow, it relatively positions the movieclip under the mask and reveals a section of the movieclip. I have this working fine, however the one functionality I'd like to add, is when the left or right border of the movieclip is reached, the appropriate button is disabled so that the movieclip isn't positioned outside of the mask. Or it loops back to the starting x position. Here is the code: import flash.display.MovieClip; import flash.events.MouseEvent; import com.greensock.*; import com.greensock.easing.*; function init():void { TweenLite.to(products_mc, 1, {x:696, alpha:1}); } init(); function productsLeft(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"-255"}); } function productsRight(events:MouseEvent):void { TweenLite.to(products_mc, .75, {x:"255"}); } arrowL_btn.buttonMode = true; arrowL_btn.addEventListener(MouseEvent.CLICK, productsLeft); arrowR_btn.buttonMode = true; arrowR_btn.addEventListener(MouseEvent.CLICK, productsRight); if (products_mc.x == 696) { arrowR_btn.visible = false; arrowR_btn.buttonMode = false; } if (products_mc.x == -1086) { arrowL_btn.visible = false; arrowL_btn.buttonMode = false; } /* buttons */ arrowL_btn.doubleClickEnabled = true; arrowR_btn.doubleClickEnabled = true; arrowL_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); arrowR_btn.addEventListener(MouseEvent.DOUBLE_CLICK, doubleClickHandler, false); function doubleClickHandler(evt:MouseEvent):void { evt.stopPropagation(); }

I have created a SoundManager object which loads my sounds and has functions for playing them. Most of the time, they are various click-sounds attached to buttons, but in some cases, there are longer sounds associated with a TimelineLite animation. I am trying to trigger them with this: var tlboxBtn = new TimelineMax({onStart: $EV_SoundManager.playSFX, onStartParams: ["glitch020"], paused : true }); // other animation items added to the TimeLine... then... element.grpanimation = tlboxBtn; element.grpanimation.play(); The first thing in the "playSFX" function of $EV_SoundManager is a log to the console displaying the name of the soundfile to play. This is working for all calls triggered from button clicks, but not when this timeline runs. No sound and no log statement. I could just create an anonymous function, call that from the TimelineMax, and have it trigger the function in the $EV_SoundManager object, but that seems like a step too many. Is there a better way to do this? Any help is appreciated. --Kevin

Hello everyone! Here is the link to my codepen: http://codepen.io/reggiegulle/pen/zCHyn As my code stands, it is fairly straightforward, and it does manage to accomplish what it was meant to do. It's just one basic timeline with buttons and all the following functions are grouped at the bottom of the code, like so: $("#debeersTopPanel").on("click", function(){ debeers.tweenFromTo("ringFadeIn","ringPause"); }); function ringBack(){ $("#BackButton1").on("click", function(){ debeers.tweenFromTo("ringFadeOut","ringToStart"); }); } $("#debeersBottomPanel").click(function(){ debeers.tweenFromTo("pendantFadeIn","pendantPause"); }); function pendantBack(){ $("#BackButton2").on("click", function(){ debeers.tweenFromTo("pendantFadeOut","pendantToStart"); }); } function debeersResume(){ debeers.play(0); I am fairly new at JavaScript, and so I am seeking some help on whether the code above can still become more elegant. The events on the timeline are mostly repetitive; could these repetitions be turned into iterations? I am still trying to get a better idea of objects and object arrays, and so I am not too sure whether those principles can apply to my codepen, or if other entirely different processes may be applicable. It's just that there may be a chance that more items will be added to my present drop down menu, and so any method of streamlining the coding (if there is any) would be very useful. I would appreciate any help. Thank you very much in advance! (Note: I mostly specialize in video, so if anyone has any questions about it, I would not hesitate to help out as much as I can)

Hi there - I have an animation using tweenlite to tween some divs that contain png w transparent backgrounds. This looks great in all browsers expect IE8 there are blackout lines around the pngs. I know there are fixes for jquery fades and whatnot in IE8 for transparent PNGs, however none of the ones i've tried work on my file. Here is the timelinelite doing the tweening: var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ; and here is the css #lens_flare1 { opacity:0; position:absolute; left:22px; top:5px; background:transparent url('images/lens_flare.gif') no-repeat; width:59px; height:53px; } #lens_flare2 { opacity:0; position:absolute; left:73px; top:10px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; background:transparent url('images/lens_flare.png') no-repeat; width:59px; height:53px; } #lens_flare3 { opacity:0; position:absolute; left:118px; top:21px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } #lens_flare4 { opacity:0; position:absolute; left:233px; top:50px; width:59px; height:53px; background:transparent url('images/lens_flare.png') no-repeat; } Any tricks for this? Apologies for not posting to Codepen but have super limited time at the moment to get setup on that - Any help is greatly appreciated. ~julia

Hi there, I've got a rather long timeline with several onComplete handlers set at various points. In trying to reverse it with the default suppressEvents set to false, the reversal works except all the onComplete handlers are skipped (the actions within those handlers need to be reversed as well). When I reverse it with suppressEvents set to 'true' ( I wrote it as tl.reverse(true); ), only the first third of the timeline gets reversed, basically right before the first tween with an onComplete handler. Should I be doing something differently? Here's a look at the timeline code: var tl = new TimelineLite(); // tl.timeScale(0.25); tl.to($('#floatBubble' ),1,{top: -12, ease: Expo.easeInOut}) .set($('.down-arrow' ),{clip: "rect(-40px, 40px, 40px, 0px)"}) .to($('.down-arrow' ),1,{clip: "rect(-40px, 40px, -40px, 0px)", ease: Expo.easeInOut},1) .set($('.down-arrow' ),{clip: "rect(40px, 40px, 28px, 0px)"}) // .set($('#loadedContent' ),{overflow: "hidden"}) .to($('#posterContainer'), 1.5, {"margin-top":"111px", ease: Expo.easeInOut, onComplete: function(){ var styles = { "background-color": "white", "z-index":1030 } $('.main-header').css(styles); // $('#loadedContent').css("overflow", "hidden"); $('#loadedContent section').css("padding-top", "11px"); //so #floatBubble doesn't get cut off at top by fixed header } }, 0) .to($('.keyline-work' ),2.5,{width: 40, ease: Expo.easeInOut}, 1) .to($('#posterContainer img'),1.5, {"margin-top":"-111px", ease: Expo.easeInOut },1) .to($('.poster-image'), 1.5, {height: "300px", ease: Expo.easeIn},1) .to($('#fauxHeader'), 0.3, {opacity:0, ease: Expo.easeIn, onComplete: function(){ $('#fauxHeader').remove(); } },0.55) .to($('#loadedContent'), 1.5, {"max-width":"1280px", ease: Expo.easeInOut},1) // .to($('.down-arrow'), 1, {"height":"0px", ease: Expo.easeInOut }) .to($('.prev-post'), 0.5, {"margin-left":"-60px", "width":"160px", ease: Expo.easeInOut }, 1) .to($('.next-post'), 0.5, {"margin-right":"-60px", "width":"160px", ease: Expo.easeInOut }, 1) .to($('.post-nav'), 0.5, {"width":"120px", ease: Expo.easeInOut }, 1.5) .to($('.prev-post'), 1, {"margin-left":"0px", "width":"40px", ease: Expo.easeInOut}, 2) .to($('.next-post'), 1, {"margin-right":"0px", "width":"40px", ease: Expo.easeInOut, onComplete: function(){ $('.post-nav').wrapAll("<div class='post-navigation-wrap'></div>"); $('#floatBubble').toggleClass('icon-landscape'); $('.down-arrow span i').toggleClass('icon-caret-up'); } }, 2) .to($('#posterContainer img'), 2.5, {"margin-top":"-280px", ease: Expo.easeOut },2.5) .to($('.entry-title' ),1.5,{y: 0, ease: Expo.easeInOut}, 1.55) .to($('.keyline-work' ),1.5,{y: 0, ease: Expo.easeOut}, 2.25) .to($('.entry-title h2' ),1.5,{y: 0, ease: Expo.easeInOut}, 1.55) .to([$('.big-header'), $('.entry-title h2' ) ],0.75,{color: "black", ease: Expo.easeInOut}, 2) .to($('.pubdate'),1,{"opacity": 0.75, ease: Expo.easeInOut, onComplete: function(){ console.log("reversed? ", this.reversed()); $(window).trigger("scroll"); } },2) .to($('.poster-image'), 2, {"height":"150px", ease: Expo.easeOut}, 2.25) .to($('.down-arrow' ),1,{clip: "rect(-40px, 40px, 28px, 0px)", ease: Expo.easeInOut},3.5) .set($('.down-arrow span i'),{bottom:-20}, 3.5) .to($('.down-arrow span i'), 1, {bottom: 35, ease: Expo.easeInOut}, 4.35) .set($('.down-arrow' ),{clip: "rect(-80px, 40px, 28px, 0px)"}) .to($('#floatBubble' ),1,{top: -80, ease: Expo.easeInOut},5.35) .fromTo($('.callout'), 2, {"opacity":0}, {"opacity":1, ease: Expo.easeOut}, 2.5) // .to($('.down-arrow'), 1, {"height":"100%", ease: Expo.easeInOut }) .to($('.down-arrow'), 1, {"bottom": -15, ease: Expo.easeInOut},3.75 )

So I have a loop of lights lighting and diming - right now I have this happening in timelinelite with results that I find satisfactory. However, I'm wondering if any of you devs have a even more streamlined way of accomplishing this via timelinemax and an array? Can you let me know anymore details about the technic I'm demonstrating here? var tl = new TimelineLite(); tl.to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare2", .25, {alpha:1, scaleX:1.3, scaleY:1.3}) .to("lens_flare2", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare1", .25, {alpha:1, scaleX:1.6, scaleY:1.2}) .to("lens_flare1", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare4", .25, {alpha:1, scaleX:1.4, scaleY:1.4}) .to("lens_flare4", .25, {alpha:0, scaleX:1, scaleY:1}) .to("lens_flare3", .25, {alpha:1, scaleX:1.2, scaleY:1.2}) .to("lens_flare3", .25, {alpha:0, scaleX:1, scaleY:1}) ;

Hello fellow Greensockers! I'm prototyping a method for arranging content on a page to prevent visitors from having to scroll through butt-loads of content. The method I'm trying to use is to shift the content divs over, slide them up, then stick them at the top of the the stack of div blocks. Here's what I have so far to help you visualize: http://jsfiddle.net/4zzaY/4/ Each one of those colored blocks represents a div full of content. Originally I wanted to also have the jQuery .click() method alter the actual HTML ordering of the Divs, and change them the css positioning from relative to absolute and back to relative, that way they would automatically stack up on their own. However, I am not aware of any method to alter the arrangement of HTML with Greensock, jQuery, or javaScript in general. So what I ended up doing is keeping every element positioned absolutely and animating them that way. My problem is that I'm noticing an issue, after the user has clicked on every single one of the buttons, they can no longer fire. I'm guessing this is because after the animation is fired, it's considered complete and no longer run-able. Unfortunately, I can't use any methods to reverse the timeline because that would alter the positioning of the elements. I considered the yoyo method but I believe that only works for tweenMax, not timelines? And even so, I'm not even sure that method would work anyway. I suppose even though my current method isn't exactly ideal, it still works with the exception of the animations not being able to fire twice.

Hi Guys, I just wanted to share an issue I was faced with yesterday, incase it helps anyone else experiencing the same problem. After successfully creating tweens with tweenlite, I wanted to convert my code to timelineLite format. On doing so my animation stopped working. After several hourse of debugging, I eventually got it o work. The problem was with the Tweenmax library I was referencing. I was referencing the latest library, however changing the library to 1.8.4 resolved my issue. The library was present but for some reason my animation would not start. My code was in the format: $('document').ready(function() { var tl = new TimelineLite(); tl.to(element, 2, {autoAlpha:1}) }) Someone may have a better insight as to exactly why it did this... Wes

Hey I have a website which generates posts and I was wondering if I could use the stagger animation to Tween them from opacity 0 to opacity 1 on page load. The amount of elements differs since the website is dynamic. It is structured as follows. <div id="message-container"> <div class="message1"> <div class="message2"> <div class="message3"> etc... </div> I want to animate the divs with class .message<insert number>. Is there a way to do this by targeting the child elements of the message container and then doing the stagger effect on that?

Greetings, Thank you for reading, and for any insight anyone can offer. It is appreciated. I adapted the code from this demo on codepen: http://codepen.io/GreenSock/pen/bpezc ... in order that I may understand how things work. For some reason unknown to me, I must run the timeline from a button (unlike the code in the codepen deal). This works: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:false}) ); }); $("#pause").click(function() { //alert("Pause Button"); tl4.pause(); //tl4.play(0); }); } This does not: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); $("#play").click(function() { tl4.insert( TweenLite.to(logo4, 2, {ease:Linear.easeNone, css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); //tl4.restart(); tl4.play(); }); } Nor does this: window.onload = function() { var logo4 = document.getElementById('logo4'); var tl4 = new TimelineLite(); tl4.insert( TweenLite.to(logo4, 5, {css:{borderBottomColor:'#90E500', left:'542px', backgroundColor:'black', color:'white'}, delay:0, paused:true}) ); $("#play").click(function() { tl4.play(); }); } It only works if the timeline is put in the function of the button ... but in codepen: var tl = new TimelineLite({onUpdate:updateSlider}); tl.set("#content", {visibility:"visible"}) .from("h1", 0.5, {left:100, autoAlpha:0}) .from("h2", 0.5, {left:-100, autoAlpha:0}, "-=0.25") .from("#feature", 0.5, {scale:0.5, autoAlpha:0}, "feature") .from("#description", 0.5, {left:100, autoAlpha:0}, "feature+=0.25") .staggerFrom("#nav img", 0.5, {scale:0, rotation:-180, autoAlpha:0}, 0.2, "stagger"); $("#play").click(function() { // function } Obviously, I am missing something. Thanks for any guidance offered. Steve

[sOLVED] IMPORTANT: When using GS with require.js dont override the GS variables like that: define(['ScrollToPlugin', 'TweenLite', 'TimelineLite'], function(ScrollToPlugin, TweenLite, TimelineLite) { // your code here }) Hello, I am doing something weird probably because I cant add Tween to Timeline. var tw = TweenLite.to(window, 0.7, {scrollTo:{y: 300}, ease:Power3.easeInOut}); console.log(tw); var tl = new TimelineLite(); tl.add( tw ); and the same when testing this way: var tl = new TimelineLite(); tl.add( TweenLite.to(window, 0.7, {scrollTo:{y: 300}, ease:Power3.easeInOut}) ); Both ways I see the error: Uncaught Cannot add [object Object] into the timeline; it is not a tween, timeline, function, or string. The output from console.log(tw) begins with: Object {vars: Object, _totalDuration: 0.7, _duration: 0.7, _delay:0, _timeScale: 1…} _active: false _delay: 0 _duration: 0.7 _ease: Object _easePower: 3 _easeType: 3 _firstPT: Object It looks like a tween anyway.. What I am doing wrong? Same code in jsFiddle is working fine. Pls. help with a hint. EDIT: I am loading all .js files with require.js (AMD loader). What is the correct way of loading GS plugins with require.js shim?

I have a TimelineLite tween sequence that has an element tweening in the from the right, then later tweening off to the left with the opacity tweening to 0. Once the element's opacity tweens to 0 (on the way out) I'd like to reset the element's position to it's original position. Here's how I'm attempt to do so, which isn't working: var tl = new TimelineLite(); tl.to("#element", 1, {left: "-=50px", autoAlpha:1}) .add("elementOutLabel", "+=2") .to("#element", 0.5, {left: "-=50px", autoAlpha:0}, "elementOutLabel+=1") .set("#element", {left: "+=50px"}); } Can someone explain to me why this position reset isn't working for me?

The basic of my problem is that I am using superscrollorama to pin timelineLite animations and when I want to jump to another part of the html page going up works fine but going back down is slowed down, (the anchor points are offset by part of the pixel animation that is bigger then the image so links don't go to the correct point on the page), by the animation being done in the timeline. I was hoping for a good way for setting timeline animation to be complete but I have been having problems of goto a specific frame and such. I originally tried to unpin all the pins and put them back in but that doesn't seem to do what I wanted. So now I am trying to complete the animation before I scroll to it so it gets by the pins at the fastest rate. I know you guys don't go deep into superscrollorama but I am just looking for how best to complete a timelite animation to it's final frame from a click event. Any ideas would be helpful.

Hey all, Relatively fresh in the web-dev world, really enjoying using greensock! I've been working on the website for my company. One of the features of the site will be a colour chooser/builder, allowing visitors to choose/design there own variation of one of our products (Mountain Bike related in this case). The idea is, you select the colour of the component you want, and it tweens to the select colour. I need it to fade out of the current colour, then into the selected. I've got it working, although the images I have are slightly large and un-optimized at the moment. I've created a demo site here: http://goo.gl/rvuSco so you can see the effect I'm talking about. The issue I've run into, is that when a visitor first comes to the site, prior to anything occurring on the timeLine, the fade out/in tween doesn't function. It seems to just ignore it. I've come up with a fix, by forcing a dummy tween to full opacity when the page loads, but is this correct? all subsequent tweens work great, but for some reason the first one has an issue. I've commented out my fix, to illustrate the issue on http://goo.gl/rvuSco. HTML code with JS: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Go Greensock Go!</title> <link href="/GreenSockForum/css/placer.css" rel="stylesheet" type="text/css"> </head> <body> <div class="fullPage"> <div class="colourSelector"> <div id="ringDisplay"> <img id="ringImg" src="/GreenSockForum/img/ringRenders/BlackRing.png"/> </div> <div id="bashDisplay"> <img id="bashImg" src="/GreenSockForum/img/ringRenders/BlackBash.png"/> </div> <div class="bashColours"> <p>Bash Colours</p> <div class="colourBox" id="squareBlackBash"></div> <div class="colourBox" id="squareRedBash"></div> <div class="colourBox" id="squareGoldBash"></div> <div class="colourBox" id="squareGreenBash"></div> <div class="colourBox" id="squareBlueBash"></div> <div class="colourBox" id="squareSilverBash"></div> <div class="colourBox" id="squareNoneBash"></div> </div> <div class="ringColours"> <p>Ring Colours</p> <div class="colourBox" id="squareBlackRing"></div> <div class="colourBox" id="squareRedRing"></div> <div class="colourBox" id="squareGoldRing"></div> <div class="colourBox" id="squareGreenRing"></div> <div class="colourBox" id="squareBlueRing"></div> <div class="colourBox" id="squareSilverRing"></div> <div class="colourBox" id="squareNoneRing"></div> </div> </div> </div> <script type="text/javascript" src="/GreenSockForum/js/greensock/plugins/CSSPlugin.min.js"></script> <script type="text/javascript" src="/GreenSockForum/js/greensock/TweenMax.min.js"></script> <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> <script> $(document).ready(function() { var isAnimating = false; var tl = new TimelineLite({ onComplete: function() { isAnimating = false; } }); //tl.to("#bashImg", 0.5, {opacity:1}); //<--Required to fix issue $( "#squareBlackBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlackBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareRedBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to($("#bashImg"), 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/RedBash.png'); $("#bashImg").show(); }) tl.to($("#bashImg"), 0.5, {opacity:1}); }); $( "#squareBlueBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/BlueBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareGreenBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GreenBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareGoldBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/GoldBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareSilverBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); tl.add(function() { $("#bashImg").hide(); $("#bashImg").attr('src','/GreenSockForum/img/ringRenders/SilverBash.png'); $("#bashImg").show(); }) tl.to("#bashImg", 0.5, {opacity:1}); }); $( "#squareNoneBash" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#bashImg", 0.5, {opacity:0}); }); $( "#squareBlackRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlackRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareRedRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/RedRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareBlueRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/BlueRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareGreenRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GreenRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareGoldRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/GoldRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareSilverRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); tl.add(function() { $("#ringImg").hide(); $("#ringImg").attr('src','/GreenSockForum/img/ringRenders/SilverRing.png'); $("#ringImg").show(); }) tl.to("#ringImg", 0.5, {opacity:1}); }); $( "#squareNoneRing" ).click(function() { if (isAnimating) return; isAnimating = true; tl.to("#ringImg", 0.5, {opacity:0}); }); }); </script> </body> </html> My hack-job lovely css: * {margin:0;} html,body {height: 100%;} .fullPage { position: relative; height:100%; width:100%; box-shadow: 0px 2px 10px; background-color: #FFFFFF; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnICB4bWxuczp4bGluaz0naHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayc+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cnIGdyYWRpZW50VW5pdHM9J3VzZXJTcGFjZU9uVXNlJyBjeD0nMCcgY3k9JzAnIHI9JzQyJSc+CgkJPHN0b3Agb2Zmc2V0PScwJScgc3RvcC1vcGFjaXR5PScwJyBzdG9wLWNvbG9yPScjMDAwMDAwJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScxJyAgc3RvcC1jb2xvcj0nIzY2MmYyZicgLz4KCTwvcmFkaWFsR3JhZGllbnQ+Cgk8cmFkaWFsR3JhZGllbnQgaWQ9J2cyJyBncmFkaWVudFVuaXRzPSd1c2VyU3BhY2VPblVzZScgY3g9JzAnIGN5PScwJyByPSc0MiUnPgoJCTxzdG9wIG9mZnNldD0nMCUnIHN0b3Atb3BhY2l0eT0nLjEnIHN0b3AtY29sb3I9JyMwMDAwMDAnIC8+CgkJPHN0b3Agb2Zmc2V0PSc1MCUnIHN0b3Atb3BhY2l0eT0nLjUnICBzdG9wLWNvbG9yPScjNjYyZjJmJyAvPgoJCTxzdG9wIG9mZnNldD0nMTAwJScgc3RvcC1vcGFjaXR5PScuOScgIHN0b3AtY29sb3I9JyM2NjJmMmYnIC8+Cgk8L3JhZGlhbEdyYWRpZW50PgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnKScvPgoJPHN2ZyB4PScwJyB5PScwJyBvdmVyZmxvdz0ndmlzaWJsZSc+CgkJPGxpbmUgaWQ9J2wnIHgxPScwJScgeDI9JzAnIHkxPScwJyB5Mj0nMTAwMCUnIHN0eWxlPSdzdHJva2U6I2Q5ZDZjMzsgc3Ryb2tlLXdpZHRoOjIuNDY7JyB0cmFuc2Zvcm09J3JvdGF0ZSgwKScvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC01LjI5NDExNzY0NzA1ODgyMyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTEwLjU4ODIzNTI5NDExNzY0NyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTE1Ljg4MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTIxLjE3NjQ3MDU4ODIzNTI5MyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTI2LjQ3MDU4ODIzNTI5NDExNiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTMxLjc2NDcwNTg4MjM1Mjk0MiknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTM3LjA1ODgyMzUyOTQxMTc2KScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNDIuMzUyOTQxMTc2NDcwNTkpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC00Ny42NDcwNTg4MjM1Mjk0MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTUyLjk0MTE3NjQ3MDU4ODIzKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNTguMjM1Mjk0MTE3NjQ3MDYpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02My41Mjk0MTE3NjQ3MDU4ODQpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC02OC44MjM1Mjk0MTE3NjQ3MSknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTc0LjExNzY0NzA1ODgyMzUyKScgLz4KCQk8dXNlIHhsaW5rOmhyZWY9JyNsJyB0cmFuc2Zvcm09J3JvdGF0ZSgtNzkuNDExNzY0NzA1ODgyMzUpJyAvPgoJCTx1c2UgeGxpbms6aHJlZj0nI2wnIHRyYW5zZm9ybT0ncm90YXRlKC04NC43MDU4ODIzNTI5NDExNyknIC8+CgkJPHVzZSB4bGluazpocmVmPScjbCcgdHJhbnNmb3JtPSdyb3RhdGUoLTkwKScgLz4KCTwvc3ZnPgoJPHJlY3QgeD0nMCcgeT0nMCcgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0ndXJsKCNnMiknLz4KPC9zdmc+'); } .colourSelector { text-align:center; position: relative; background-color: #0c0ceb; background-image:url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScyNzYnIGhlaWdodD0nMjc2JyB2aWV3Qm94PScwIDAgMjc2IDI3Nic+Cgk8ZGVmcz4KCQk8cGF0dGVybiBpZD0nYmx1ZXN0cmlwZScgcGF0dGVyblVuaXRzPSd1c2VyU3BhY2VPblVzZScgeD0nMCcgeT0nMCcgd2lkdGg9JzU1LjInIGhlaWdodD0nNTUuMicgdmlld0JveD0nMCAwIDExMC40IDExMC40JyA+CgkJPHJlY3Qgd2lkdGg9JzExMCUnIGhlaWdodD0nMTEwJScgZmlsbD0nIzBjMGNlYicvPgoJCQk8cGF0aCBkPSdNMSwxaDExMC40djExMC40aC0xMTAuNHYtMTEwLjQnIGZpbGwtb3BhY2l0eT0nMCcgc3Ryb2tlLXdpZHRoPScxLjc4JyBzdHJva2UtZGFzaGFycmF5PScwLDIsMicgc3Ryb2tlPScjZmZmZmZmJy8+CgkJPC9wYXR0ZXJuPiAKCQk8ZmlsdGVyIGlkPSdmdXp6JyB4PScwJyB5PScwJz4KCQkJPGZlVHVyYnVsZW5jZSB0eXBlPSd0dXJidWxlbmNlJyByZXN1bHQ9J3QnIGJhc2VGcmVxdWVuY3k9Jy4yIC4zJyBudW1PY3RhdmVzPSc1JyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+CgkJCTxmZUNvbG9yTWF0cml4IHR5cGU9J3NhdHVyYXRlJyBpbj0ndCcgdmFsdWVzPScwJy8+CgkJPC9maWx0ZXI+Cgk8L2RlZnM+Cgk8cmVjdCB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJyBmaWxsPSd1cmwoI2JsdWVzdHJpcGUpJy8+CjxyZWN0IHdpZHRoPScxMDAlJyBoZWlnaHQ9JzEwMCUnIGZpbHRlcj0ndXJsKCNmdXp6KScgb3BhY2l0eT0nMC4xOCcvPgo8L3N2Zz4K'); height:85%; width:60%; margin-left:20%; top:10%; border-radius:50px; box-shadow: 5px 5px 20px; } .ringColours { color:white; position: absolute; height:90%; width:40px; right:5%; top:5%; } .bashColours { color:white; position: absolute; height:90%; width:40px; left:5%; top:5%; } .colourBox { position:relative; margin-top:7%; width:40px; height:40px; border: 2px solid white; } .colourBox:hover { border: 4px solid yellow; } #ringDisplay { max-width: 500px; position:absolute; left:-10%; right:0; top:5%; bottom:0; margin:auto; } #bashDisplay { max-width: 500px; position:absolute; left:-10%; right:0; top:5%; bottom:0; margin:auto; } #squareBlackBash {background-color: black;} #squareBlueBash {background-color: blue;} #squareRedBash {background-color: red;} #squareGoldBash {background-color: gold;} #squareGreenBash {background-color: green;} #squareSilverBash {background-color: silver;} #squareBlackRing {background-color: black;} #squareBlueRing {background-color: blue;} #squareRedRing {background-color: red;} #squareGoldRing {background-color: gold;} #squareGreenRing {background-color: green;} #squareSilverRing {background-color: silver;} Thanks in advance for any assistance. It's working, so I guess its ok to do the dummy tween initially, but I was just wondering if there was a better way to do it. Also, any other hints/tips/tricks/recommendations are greatly appreciated! Cheers! ~Ronen

Hello i have a question, is possible add new tweens to a TimelineMax and reorder another on the fly (dynamically). Example: timeLine = new TimelineMax(); timeLine.add( TweenMax.to(".box1", 1, {left:100}) ).addLabel("box1"); timeLine.add( TweenMax.to(".box2", 1, {left:100}) ).addLabel("box2"); After in need add a new TweenMax after box1 but i need that box2 run after the box3 tween = TweenMax.to(".box3", 1, {left:100}); timeLine.add(tween, "box1"); timeLine.play(); RESULT: Currently the box2 and the box3 run at the same time. Another test, was get 'box2' tween and use UpdateTo() to add delay:1 but UpdateTo dont work with delays. Some idea?

[see "Why can't code be in <head>?" thread as the problem has been pinned down to putting the timeline in the <head> and .play() in the <body>] Been using jQuery animation and am new to GSAP. I created a TimelineLite animation on a standalone page. The page includes all the scripts and style resources used by my live website so I could check for conflicts. It ran fine -- animation was mostly opacity changes. I put the script into my test site. [uPDATE: On the test site I use a JS closure to encapsulate the TimelineLIte animation -- this seems to be the problem]. I see the text and image resources but nothing is animated until it hits the onComplete on the last line. That calls a TweenLite.to() outside the TimeLineLite to fade everything out. I stepped through the GSAP code (min version) on the test site and it seems to be running through all the steps in the animation. For instance, in TimelineLite.min.js the value of "this._totalDuration" is the total length of all the durations and delays added up. In the TweenLite.min.js code the value "e.id" takes on the values of each of my selectors as it loops around. Yet the screen shows nothing happening. I'm using this resources. <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TweenLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/TimelineLite.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/latest/plugins/CSSPlugin.min.js"></script> Any tips on debugging a problem like this [closure]? Is there a line in TweenLite.min.js I can set a breakpoint on and see what is really going on?