Search the Community

Hi, I am getting a bit confused after looking at all the different restart of a tween examples... All I would like to do is store one tween (myTween) in a variable and later restart that tween. Here is my code: import com.greensock.TweenMax; import com.greensock.TimelineLite; import com.greensock.easing.*; var tl = new TimelineLite(); var myTween:TweenMax = new TweenMax(card, .5, {x:148, y:168, scaleX:1, scaleY:1, blurFilter:{blurX:0, blurY:0, remove:true}}); //runs the card unblur function .2 seconds into the previous tween tl.add([cardReg], "-=0.1") tl.to(txt1, 1, {alpha:1}, "+=1") .to(card, .4, {alpha:0, scaleX:3, scaleY:3}, "+=1") .restart(myTween); stop(); Please advise. Thanks!

Hi, My question may sounds a little bit stupid - Is there a way to iterate throgh each item's prop with staggerTo without using too many loops? What i want to implement is somethink like this: $boxes.each(function(i, box){ var $box = jQuery(box); var animation = new TimelineLite({ paused: true }); animation.staggerTo($box, 1, {left: $box.position().left, top: $box.position().top }); this.animation = animation; }); // OR even better: var animation = new TimelineLite({ paused: true }); animation.staggerTo($boxes, 1, {left: $box.position().left, top: $box.position().top }); Any help would be greatly appreciated

I'm wanting to be able to destroy a timeline (based on resizing). When i destroy the timeline, i want to remove all of it's initial set-up CSS. Here is how a timeline is set-up: var scene = new TimelineLite(); scene .add("start", 0); scene .from(panel, 20, { opacity: 0 }, "start") .from(panelText, 20, { y: "+=60px" }, "start") .from(background, 20, { scale: "1.15" }, "start") With this, the panel is set to Opacity 0 initially. I have timelines within timelines as each panel (17 of them) animate in various combinations. I don't want the timeline active on mobile so i can disable it, but is there a method like clearProps for removing all CSS generated by all the timelines? Or must this be done outside of GSAP? The codepen attached (i got from the closest post i could find relating to this issue) demonstrates it resetting to the start, but the elements still have their CSS properties.

I'm working...or trying to work with GSAP in Adobe Edge.. And want to learn TimelineLite, i viewed the quick tip, which look very clear. But when i want to make the simple one...it won't work...with "" without "" insert tweenMax...also tweenlineLite..., different kind of object...sad but true...no action Does anybody know, what i'm doing wrong? grt, marcel // insert code to be run when the composition is fully loaded here var myWheel = sym.$("RoundRect"); var rect = sym.$("rect"); var tl = new timelineLite(); tl.to(rect, {x:750}) .to(myWheel, {x:750});

Greetings everyone! Thank you for taking the time to read my question. I am using TweenLite and TimelineLite to create an animation timeline that simulates a user navigating a set of "sections". When the user clicks a button, I create a tween that animates a percent value over the course of 0.3 seconds. On "update" of this tween, the "progress" of my timeline is set using TimelineLite.progress(x). My issue is that if one of the sections is tweened for another reason to a different position on screen, when the timeline is progressed, the section immediately snaps back to where the timeline wants it, based on the original creation. What I would like is that the position of the section would tween from it's new, updated position, to the endpoint defined in the timeline. Is this possible? Here is some pseudo-code that should help illustrate my question. var percentObj = { current: 0 }; var myTimeline = new TimelineLite(); // ---------- // Set starting positions myTimeline.add( TweenLite.set($('#section1'), { 'css': { 'y': 0 } }), TweenLite.set($('#section2'), { 'css': { 'y': 1000 } }), TweenLite.set($('#section3'), { 'css': { 'y': 1000 } }) ); // ---------- // Now that starting values are set, // pause the timeline myTimeline.pause(); // ---------- // Create future animations that // will be triggered by the user // Animate to section2 myTimeline.add( TweenLite.to($('#section2', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // Animate to section3 myTimeline.add( TweenLite.to($('#section3', 1, { 'css': { 'y': 0 }, 'ease': 'Power1.easeInOut' }) ); // ==================== function buttonClick() { TweenLite.to(percentObj, 0.3, { 'current': 0.5, 'onUpdate': updateProgress } } function updateProgress() { myTimeline.progress(percentObj.current); }

Hi! I have a timeline animation which I would like to reverse, without reversing the last two tweens. In my jsfiddle example http://jsfiddle.net/identitoe/oLpvfqm4/2/ I would like to keep the last two tweens, the margin-top and the background-color and start reversing from the point I added the label. I just don' get it to work. Thank you

Sorry for not making a codepen, but my question is so pathetically simple I think it's unnecessary. The following works. (Obviously, it's just supposed to flash the two classes on and off in alternation.) But it doesn't work without the first (or last) two lines of code. Why not? I see redundancy here, and would like to refactor this properly. var foiled_crook = new TimelineMax({repeat:-1}); foiled_crook .set($('.crook'), {autoAlpha:"1"}) .set($('.crook-blocked'), {autoAlpha:"0"}) .add("foiled", "+=2") .set($('.crook'), {autoAlpha:"0"}, "foiled") .set($('.crook-blocked'), {autoAlpha:"1"}, "foiled") .add("trying", "+=2") .set($('.crook'), {autoAlpha:"1"}, "trying") .set($('.crook-blocked'), {autoAlpha:"0"}, "trying") ; Thanks, eh.

Hi, I am having a 101 issue I think, but am following the instructions as best as possible. Ultimately I am trying to create an Adobe Edge animation that completes after a mouse click (using multiple tweens in a TimelineLite function) and then links to a URL. The attached code is a simple test I created after my brain nearly burst trying to create the capability in the full animation. I also replaced the Window.Open with an Alert function for simplicity. All to no avail. The script is attached to the click event of an Adobe Edge animate element (it's a rectangle for completeness), the first alert works, the tween animates and then nothing... The browser console reports '"Javascript error in event handler! Event Type = element"'. Am I missing something in the .call parameters? All help much apreciated. Thanks! function GRsFunction( param1 ) { alert('from GRsFunction - ' + param1); } GRsFunction('This is the first call'); var tl = new TimelineLite(); //append a to() tween tl.to(sym.$("Rectangle"), 1, {left:450, top:95, scale:0.6, ease:Power2.easeInOut}); //then load up our call t1.call(GRsFunction, ["It's from TimelineLite"]); t1.play();

Normally, adding a tween without a position parameter will add it after ALL the tweens. Is there an easy way to add a tween right after the last tween? This without manually using variables, manually sorting the .to calls and without creating sub-timelines (ideally) In the example, tl.addLabel("after-bluebox"); adds the label BEFORE the tween, if not present. I think that there could be a way to add it AFTER the tween, perhaps tl.addLabel("after-bluebox", "", true); where true means "after the last tween you added"

import com.greensock.*; import com.greensock.easing.*; TweenLite.defaultEase = Linear.easeNone; var tl:TimelineMax = new TimelineMax(); tl.add( TweenMax.to(mc1,2, {x:"500"}),0.5 ); tl.add( TweenMax.to(mc2,2, {x:"500"}),1 ); tl.add( TweenMax.to(mc3,2, {x:"500"}),1.5 ); tl.add( TweenMax.to(mc4,2, {x:"500"}),2 ); tl.add( TweenMax.to(mc5,2, {x:"500"}),2.5 ); stage.addEventListener(MouseEvent.CLICK,Rewind); function Rewind(e:MouseEvent) { tl.tweenTo(0); } Hi, I'm trying to tween a TimeLine to a certain time in the timeline (0, in this case). Is it possible to control how quickly this it tweened to? even adding easing? Something like tl.tweenTo(0,2,{ease:Sine.easeInOut}); Thanks, Darren

If I have an animation somewhere on the timeline, also I have a defined value which contains the smallest duration when this timeline can finish, is there a better way to achive this than the attached codepen? tl.to("#redBox", 2, { x: 200, delay: 0.5 }); My animation's duration is 2,5 seconds, but I would like the timeline to complete only after 5 or more seconds. tl.to({}, 5, {}, 0); Then I have this empty animation with 5 seconds duration starting at position 0, but it seems too hacky. Is there any in built way to do this? (I saw that .duration(value) setter is not made for this as that just change the timescale. I don't want to change the behaviour of the animations.)

I have attached a Codepen with a special case. This is just taken out from a complex system and I'm unable to use different "use case" for the Tween creation. I have an element and I know that the target X value for this element is 0. I have an algorithm which creates the fromTo tweens for the preceding tweens and also a simple Tween with duration 0 to set the calculated "starting" value. (this 0 duration is a hack to position the element to the right place on play(0), because of the first fromTo has a delay and it won't render until the delay ended). So the question is, how could I add these tweens to the timeline and the set the timeline's position to 0, which would mean x: 500 in my example? Also it seems like on my Codepen example, that the duration 0 tween isn't work fine with the latest version. I'm using VERSION: 1.11.8 and it works fine there. It could be great if you could give a better solution for that hack. Thank you!

I found how to add lagSmoothing to tweenlite and max, but I have not been able to find or figure out how to use it with TimelineLite. Where would I add it in this for example? var tl = new TimelineLite(); tl.to(energyImage, 0, {opacity:0}); tl.from(shape, 5, {rotationY:"-=3000", ease:Sine.easeIn}); tl.from(shape, 1, {autoAlpha:0}, "-=4"); Thanks

Hello every one. This is my first post. And before i write anything, i would like to say how much i enjoy this library and how it opens great opportunities for any type of design. So many heart felt thanks are in order. http://goo.gl/DMBeAQ Basically, i got this page and scroll related animations(with John Polaceks SupersScrolloroma , shout out for his great script as well). As the page scrolls, so the pictures in phone changes. My problem is, when someone scrolls fast, the animations (like changing opacity from 0 to 1 and back) stops animating all together and just hang in there. So I've looked through the docs and kinda got lost on this issue. Since im designer and not a coder, somewhere along the reading i blew my head to the ceiling trying to find the solution for my problem. May be though i was looking for wrong keywords such as resetting animations altogether. Is there a way i can force tweenlite to do all the animations in order without jumping to other PS: i didnt use codepen because it didnt have superscrollorama (it seems) and i really think one of you will bump my head with an extremely obvious solution without even looking at my site Thanks in advance. PS2: Well i think it better to let you guys decide thats wrong rather than me saying something that would confuse you. So PS2: I dont want you to hunt for the code either, so here the part i believe is the problematic part. Please take note that, the problematic layers are usually "beaconimage1" which is "loading" image (since its being called several times) and "#beaconimaged" which is "detecting" image. But it can some other layer altogether. It really depends on luck. Every time i refresh and scroll down fast, some layer just gets stuck in the mid animation as i've mentioned above. ease:Quad.ease-Out had to be seperated because it countained letters which when combined makes a spam word " S E O " it seems. So in original code its together and not seperated. // START controller.addTween( '#start', (new TimelineLite()) .append([ TweenLite.to( $('#service_logo'), 0.3, {css:{opacity:0}, ease:Quad.ease Out}), TweenLite.fromTo( $('#phone'), 0.7, {css:{opacity:0, display:'none', marginBottom:-150}}, {css:{opacity:1, display:'block', marginBottom:0}, ease:Quad.ease Out}), TweenLite.fromTo( $('#beacontitle'), 0.7, {css:{opacity:0, display:'none', marginBottom:-150}}, {css:{opacity:1, display:'block', marginBottom:0}, ease:Quad.ease Out}), ]) ); // LOADING SCREEN controller.addTween( '#loading', (new TimelineLite()) .append([ TweenLite.to( $('#beaconimage1'), 0.5, {css:{opacity:0}}), TweenLite.fromTo( $('#beaconimaged'), 0.5, {css:{opacity:0, display:'none'}}, {css:{opacity:1, display:'block'}, ease:Quad.ease Out}), TweenLite.to( $('#beaconimaged'), 0.5, {css:{opacity:0},delay:1}), TweenLite.to( $('#beaconimagel'), 1, {css:{opacity:1, display:'block'},delay:1.5}), ]) ); // step 1b controller.addTween( '#ara1', (new TimelineLite()) .append([ TweenLite.to( $('#beaconimagel'), 1, {css:{opacity:0},delay:0.1}), TweenLite.fromTo( $('#beaconimage4'), 1, {css:{opacity:0, display:'none',marginTop:16}}, {css:{opacity:1, display:'block',marginTop:0}, ease:Quad.ease Out,delay:1}), TweenLite.fromTo( $('#beaconimage5'), 0.5, {css:{opacity:0, display:'none', marginTop:20}}, {css:{opacity:1, display:'block', marginTop:0}, ease:Quad.ease Out,delay:1.5}), TweenLite.fromTo( $('#beaconimage6'), 0.5, {css:{opacity:0, display:'none', marginTop:-20}}, {css:{opacity:1, display:'block', marginTop:0}, ease:Quad.ease Out,delay:1.5}), ]) ); // step 2 // step 1b controller.addTween( '#box2', (new TimelineLite()) .append([ TweenLite.to( $('#beaconimage4'), 0.5, {css:{opacity:0}}), TweenLite.to( $('#beaconimage5'), 0.5, {css:{opacity:0}}), TweenLite.to( $('#beaconimage6'), 0.5, {css:{opacity:0}}), TweenLite.to( $('#beaconimage1'), 0.5, {css:{opacity:1}, delay:1}), ]) ); // step 2 // THE END controller.addTween( '#end', (new TimelineLite()) .append([ TweenLite.to( $('#phone'), 0.1, {css:{marginBottom:75}}), TweenLite.to( $('#beacontitle'), 0.1, {css:{marginBottom:75}}), ]) ); // step 2

This may be obvious, but I was wondering the best practice for dealing with Timelines on rollover/out states? Specifically I do a Timeline animation on rollover of an object (using jQuery's hover()) — on rollout I want to kill that timeline and tweenback — I use a simple TweenMax on the rollout because I don't simply want to reverse the Timeline (that would be the obvious and elegant solution), as the 'out animation' is different from the 'in animation'. The best I could come up with is to store the Timeline in the object, and then kill it on rollout (myTImeline.kill()) and then do the 'out animation'. Is there a more elegant way? I take it because a Timeline is a complex thing that there's no equivalent to TweenMax's 'kill all tweens of this object'?

I have an object that is within scope of two tweens. I want to relatively tween a numeric property of this object in both tweens, however the tweens both seem to be making their own internal copy of the object during the tween and overwriting the object. Thus the resulting value of the object is equal to the value of the tween that finishes last and thus gets to overwrite the property the last. See my codepen for an example. How would I make these tweens compete against each other?

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!