lister110

Thank you for a swift reply..

Hi everyone, can can someone please help. I'm playing around with a SVG mask (first try with CSS too, so please bear with me). I have taken an existing round mask/animation previously shown on codepen and have chosen to make it square. But at the moment the animation seems to animate top left, I'd like this to start from the centre. I have tried to playing around with the 'transformOrigin' but it doesn't seem to change, what am I doing wrong? thanks in advanced.

oh god, yep!.. not thinking...

Ahh, thats it.. sorry I missed that.. Yep, although I have the animation (sequenced animating out(.to)), I was wondering if I can almost control all the three lines as a group and move them together? almost overriding the sequence of the second part of the animation?

Hi everyone (Newbie here). I'm playing around with a small animation which staggers some type. I was trying to find a way of animating into a window, as if it was masked, so I tried to use overflow hidden, but Im animating the mask itself.... My brain is slightly fazed..., so was wondering how I can animate some elements in a div and use the stagger there? so the Mask stays in place.. if it that works?? also, is there a way to control the second part of the animation (.to) and almost group the stagger perhaps, rather than one after the other. thanks in advance (sorry if my code is a little iffy ;-)) lister

ahh thanks, ill have a look..

Hi, excuse me for my lack of knowledge. I'm playing around with greensock/animate for the first time.... I am trying to scale an objects width from the left ('left_mc' across the width of the stage by 50%, I have the same happening the far right side ('right_mc')), almost like closing curtains, both objects are at very far edges of the stage. I've been tinkering with 'Scale' using TweenMax, but I cant fgure out how to pin an object and scale in one direction. Also, I guess I'll have to establish the stage dimensions first so I can define the percentage. Can someone please help point me in the right direction? or any tips on animations relative to the stage with scaling. many thanks. lister

Hi, could someone just point us in the right direction.. I have a few frames animating... 1st key frame appears in and fades out, 2nd key frame, prices appear one after the other and all fades out. 3rd key frame, appears with simple message. At the moment, after the prices animate independently I then need them all the fade out, to reveal key frame 3 but I can't seem to figure the best way to do this, maybe add them to their our timeline?, could someone help? tl.to(this.logo_mc, 1, {alpha:0},"+=3"); tl.from(this.price1_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut}); tl.from(this.price2_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut}); tl.from(this.price3_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut}); tl.from(this.price4_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut}); tl.from(this.price5_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut}); tl.from(this.price6_mc, .5, {alpha:0, scaleY:0, scaleX:0, ease:Back.easeOut}); tl.to(this.image_mc, 1, {alpha:0},"+=3"); cheers lister

Thanks..

This is probably an easy question, I keep getting a syntax error on this code.. //declare my variables var cloud1Middle = sym.$("cloud1Middle"); var cloud2Bottom = sym.$("cloud2Bottom"); var cloud3Top = sym.$("cloud3Top"); //instantiate a TimelineLite var tl = new TimelineLite({onComplete:function() { TweenLite.to(cloud1Middle, 60, {left:800}); TweenLite.to(cloud2Bottom, 100, {left:-800}); TweenLite.to(cloud3Top, 40, {left:-800}); this.restart(); }); Syntax error at line 12 in "Timeline.play" on "Stage": Unexpected token ) I was working at some point. lister

I think i may of added the TweenLite script into the html, not noticing you have an API/Server where you can add the URL to the Scripts Library within Adobe edge. It seems to be moving now.

Hi everyone, please move if this is posted in the wrong forum. I'm just trying out Greensock in Adobe Edge Ani 2015. I understand Adobe Edge Ani 2015 has been pulled, but for the time being this is what I'm using. Im a proper newbie, so please bear with me. Im confused how adobe have changed the scripting to work with objects on the stage. Im following this simple tutorial which was published 2012. The current tutorial may be out of date, I'm not sure.? http://paultrani.com/2012/11/edge-animate-and-greensock/ I have a simple rocket png on the stage and I'm trying the 'onClick' function or maybe 'onLoad' just to move the rocket, a bit like the einstein in the link above. But nothing seems to happen when I publish the HTML file. Ive followed the tutorial pretty closely, but now i'm stumped. Is this tutorial too old now? Can anyone help? or point me to a newer tutorial with a very basic setup of TweenLite with Adobe Edge Ani 2015 for a very basic animation. thanks lister

hi, just a quick one. Is it possible to save to animated gif or video using the green sock code for a short animation. It seems it flash doesn't like to render out all the sequences unless the animation is on the timeline?? any ideas Thanks lister

sorry, should of uploaded the file. This is great the only problem I have is the transition from front to back, there seems to be a slight jump. I have uploaded the current fla. Thanks for your help... lister https://onedrive.live.com/redir?resid=7E97DA5B88D54DA7!169&authkey=!AJ5ptWllClfnZzE&ithint=file%2cfla

Hi, I really appreciate all the handwork gone into these scripts... Im pretty new to Tween animation using these classes. But Im now dabbling in a small animation with a spinning coin (see http://www.ilike2flash.com/2012/06/spinning-animation-in-flash.html) This was done on a standard timeline, but Im drying to replicate this using timelinelite and I'm having a few problems (newbie coder). Im trying to scale the _x and add blur and then reveal the back from _x 0 to 1 with blur to 0. and I can't seem to get this working. Here is the code so far.. can anyone help?? import com.greensock.*; import com.greensock.easing.*; back_mc.scaleX = -0; back_mc.alpha = 0; var timeline:TimelineLite = new TimelineLite({onComplete:done}); timeline.to(front_mc, 1, {scaleX:0, alpha:0, ease:Back.easeIn}) .to(front_mc, .1, {blurFilter:{blurX:50, blurY:0}, ease:Back.easeIn}) .to(back_mc, .1, {scaleX:1, alpha:1}) .to(back_mc, .1, {blurFilter:{blurX:50, blurY:0}, ease:Back.easeIn}); function done(){ timeline.restart(); } lister

top one worked a treat..

nice one carl, I'll take a look at the amended code later. Also, your link to the v12 is great, even less code is excellent. I'll let you know how I get on..

I have a some animated text appending each other using TweenMax and TimeLine lite. Im pretty new to AS and was wondering how I create a nested Timeline. What I would like is the mc_1, mc_2 and mc_3 to animate (Turn blue) as the mc_4 fades in. At the moment each one has to allow the other to finish. Here is the code (My code may look a little whack as I'm pretty new to AS) http://www.velvetsou...ashBanners.html import com.greensock.*; import com.greensock.easing.*; import com.greensock.plugins.*; TweenPlugin.activate([TintPlugin]); //initialize settings with a 0 duration tween outside of the timeline: TweenLite.to(mc_1, 0, {_x:780}); TweenLite.to(mc_2, 0, {_x:780}); TweenLite.to(mc_3, 0, {_x:780}); TweenLite.to(mc_4, 0, {_alpha:0}); TweenLite.to(mc_5, 0, {_alpha:0}); var timeline:TimelineLite = new TimelineLite({onComplete:myFunction}); //move mc_1 on stage; timeline.append( new TweenMax(mc_1, .2, {_x:164, ease:Circ.easeOut}) ); timeline.append( new TweenMax(mc_1, .8, {tint:0xAEAFB3})); //move mc_2 on stage ; timeline.append( new TweenMax(mc_2, .2, {_x:272, ease:Circ.easeOut}),.8 ); timeline.append( new TweenMax(mc_2, .8, {tint:0xAEAFB3})); //move mc_3 on stage ; timeline.append( new TweenMax(mc_3, .2, {_x:404, ease:Circ.easeOut}),.8 ); timeline.append( new TweenMax(mc_3, .8, {tint:0xAEAFB3})); //move mc_4 on stage; timeline.append( new TweenMax(mc_4, 1, {_x:164, _alpha:100}) ); //fade all on the stage; timeline.appendMultiple([ new TweenMax(mc_1, 1, {_alpha:0}), new TweenMax(mc_2, 1, {_alpha:0}), new TweenMax(mc_3, 1, {_alpha:0}), new TweenMax(mc_4, 1, {_alpha:0})], 2); //fade in last animation; timeline.append( new TweenMax(mc_5, 1, {_x:164, _alpha:100}) ); //fade out last animation; timeline.append( new TweenMax(mc_5, 1, { _alpha:0}),3 ); function myFunction(){ timeline.restart(); } update: I thought Id create a new timeLineLite variable but I cant understand how to trigger the timeline instance at the right time. I want it to change colour as the line underneath fades in. But only at that time. //change all to blue TESTING; var tl:TimelineLite = new TimelineLite(); tl.appendMultiple([ new TweenMax(mc_1, 1, {tint:0x0085CF}), new TweenMax(mc_2, 1, {tint:0x0085CF}), new TweenMax(mc_3, 1, {tint:0x0085CF})], 5); Thanks Rob

I got this working thanks for all the help, heres the code.. import com.greensock.*; import com.greensock.easing.*; //initialize the blur setting with a 0 duration tween outside of the timeline: TweenLite.to(mc_1, 0, {blurFilter:{blurX:50}}); TweenLite.to(mc_2, 0, {blurFilter:{blurX:50}}); TweenLite.to(mc_3, 0, {blurFilter:{blurX:50}}); //etc var timeline:TimelineLite = new TimelineLite({onComplete:myFunction}); //move mc_1 on stage and tween blurX to 0; timeline.append( new TweenMax(mc_1, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) ); //move mc_1 off stage and blurX to 50; timeline.append( new TweenMax(mc_1, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2); //move mc_2 on stage and tween blurX to 0; timeline.append( new TweenMax(mc_2, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) ); //move mc_2 off stage and blurX to 50; timeline.append( new TweenMax(mc_2, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2); //move mc_3 on stage and tween blurX to 0; timeline.append( new TweenMax(mc_3, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:0}, ease:Bounce.easeOut}) ); //move mc_3 off stage and blurX to 50; timeline.append( new TweenMax(mc_3, 1, {_x:-150, blurFilter:{blurX:50}, ease:Elastic.easeInOut}), 2); function myFunction(){ timeline.restart(); } I am also watching your great screencasts over at ActiveTutes. rob

Is there any examples of looping animations, I'm checking the forums as well... I have the animation playing, can I place this into some function and then onComplete reset and play again? Sorry if this is a dumb question..

Hi I have amended the code: import com.greensock.*; import com.greensock.easing.*; var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenMax(mc_1, 1, {_x:240, ease:Elastic.easeInOut, blurFilter:{blurX:5, ease:Bounce.easeOut}}) ); timeline.append( new TweenMax(mc_1, 1, {_x:-150, ease:Elastic.easeInOut}), 2); timeline.append( new TweenMax(mc_2, 1, {_x:240, ease:Elastic.easeInOut}) ); timeline.append( new TweenMax(mc_2, 1, {_x:-100, ease:Elastic.easeInOut}), 2); timeline.append( new TweenMax(mc_3, 1, {_x:240, ease:Elastic.easeInOut}) ); timeline.append( new TweenMax(mc_3, 1, {_x:-100, ease:Elastic.easeInOut}), 2); I wated to create a blur in, see the text without a blur and then blur out, also when I play this the stage is white first, then it changes to grey (my bg colour) and then it plays the animation.. Thanks for the help so far

Thanks Carl, I'll give that a whirl..

Hi everyone, I am looking at using TimelineLite for small and simple banner (testing/playing). I have 3 clips sliding into the page pausing and then sliding out. Each clip being independent (so I'm using .appended). Im not sure how to play the first tween, pause, and then continue this tween to the end of _x (AS2), this will all need to continue as a loop... At the moment I have them just sliding onto the stage (clip w:155) then play the second tween etc.., could someone please help (Stage 468x60) import com.greensock.*; import com.greensock.easing.*; var timeline:TimelineLite = new TimelineLite(); timeline.append( new TweenLite(mc_1, 5, {_x:"-300", ease:Elastic.easeOut}) ); timeline.append( new TweenLite(mc_2, 5, {_x:"-300", ease:Elastic.easeOut}) ); timeline.append( new TweenLite(mc_3, 5, {_x:"-300", ease:Elastic.easeOut}) ); Thanks

Wow, thanks.. If I want to keep this as lightweight as possible (small swf), how do I go about this, as this will be the only code I'll use for this movie. Thanks for quick response..

Hi, Just want to say, how much fun I had playing around with this.. All I want to do is reverse my tweens on complete and then goto and play from the beginning. I cant figure out how I restart the movie after the reverse. I did have gotoAndPlay in myFunction function and it looped ok. But I want to reverse and play again. I hope this makes sense, as i'm a bit of a newbie import com.greensock.*; import com.greensock.easing.*; var timeline:TimelineLite = new TimelineLite({onComplete:myFunction}); timeline.append(TweenLite.to(mc1, .5, {x:"-600", ease:Back.easeOut}), 2); timeline.append(TweenLite.to(mc2, .5, {x:"-550", ease:Back.easeOut}), 2); timeline.append(TweenLite.to(mc3, .5, {x:"-500", ease:Back.easeOut}), 2); timeline.insertMultiple(TweenMax.allTo([mc1, mc2, mc3], 2, {y:"-200"}), timeline.duration ); function myFunction():void { timeline.reverse(); } lister