fs_tigre

I don't know but I remember trying it when GSAP first came out.

Thanks a lot! var tween = TweenMax.to("#content", 1, {alpha:.3}).reverse(); function toggle(){ tween.reversed(!tween.reversed()); }

Hi, Is it possible to check the current alpha of an element in GSAP? In other words I have a button that when clicked it changes the alpha of an element to .5 and I would like to be able to toggle the alpha from 1 to .5. Something like... function clickEvent{ if(alpha == .5){ TweenLite.to(".someElement", 1, {alpha: 1}); }else{ TweenLite.to(".someElement", 1, {alpha: .5}); } } How is this typically done? Does GSAP has some property to check the opacity of an element or it needs to be done in pure Javascript? Thanks a lot.

Thanks a lot for your help.

That's wired. Here is my CodePen which doesn't work unless I change item-1 to h1 as follow. Change ... timeLine.from("item-1", 1, {scale:5, alpha:0}) .from($("item-2"), 1, {scale:0.5, alpha:0}) to ... timeLine.from("h1", 1, {scale:5, alpha:0}) .from($("h1"), 1, {scale:0.5, alpha:0}) Any idea? Thanks a lot for your help. http://codepen.io/fs_tigre/pen/vJGke

Hi, I was trying to tween three differnent H1 tags one after the other but I cannot make it work. HTML <h1 class="item-1">Hi, I'm the first h1 tag</h1> <h1 class="item-2">Hola, I'm the second h1 tag</h1> <h1 class="item-3">And I'm the third H1 tag </h1> js - This doesn't work var timeLine = new TimelineLite(); timeLine.from(".item-1", 1, {scale:0.5, alpha:0}) .from(".item-2", 1, {scale:0.5, alpha:0}) .from(".item-3", 1, {scale:0.5, alpha:0}) This DOES work but of course it plays all of them at once. var timeLine = new TimelineLite(); timeLine.from("h1", 1, {scale:0.5, alpha:0}) .from("h1", 1, {scale:0.5, alpha:0}) .from("h1", 1, {scale:0.5, alpha:0}) I also tried selecting them like this... .from($("h1 .item-1"), 1, {scale:0.5, alpha:0}) but no luck. Again, what I want is to animate all three H1 tags but one after the other not all of them at the same time. Thanks a lot.

Cool, thanks a lot.

Hi, I was under the impression that for convenience when selecting elements you could use jQuery. In other words by using jQuery you could select your elements like this ... TweenLite.from(".some-class", 1, {scale:2.0}); instead of ... var myClass = document.getElementById(".some-class"); TweenLite.from(myClass, 1, {scale:2.0}); The reason for my question is because I just tried selecting my elements like ".class-name" and it worked without having jQuery linked. See my Codepen. http://codepen.io/fs_tigre/pen/gdbkr

Thank you for the advice!

I know this has nothing to do with TweenLite but I just wanted to thank you for your advice on this one, I came here looking for some input based on TweenLite and look you event took the time to point this out, you are GREAT thanks. I ended up assigning a unique var for each parameter and it seems to fix this problem, again I don't want to waste your time looking at my code I just wanted to post what it seems to fix the problem. Thanks a lot! public static var _fade:Number; public static var _fadeDuration:Number; public static var _scaleX:Number; public static var _scaleY:Number; public static var _scaleDuration:Number package { import com.greensock.*; import flash.display.*; import flash.events.*; public class Effects extends MovieClip{ public static var _mcFade:MovieClip; public static var _mcSize:MovieClip; public static var _fade:Number; public static var _fadeDuration:Number; public static var _scaleX:Number; public static var _scaleY:Number; public static var _scaleDuration:Number; public function Effects() { trace("this is the constructor"); } // Methods------------------------------------------------------ public static function resizeIt(mcSize:MovieClip,scaleDuration:Number,Xscale:Number,Yscale:Number) { _mcSize = mcSize; _scaleX = Xscale; _scaleY = Yscale; _scaleDuration = scaleDuration; _mcSize.addEventListener(MouseEvent.ROLL_OVER, resizing); _mcSize.addEventListener(MouseEvent.ROLL_OUT, resizing2); } public static function fadeIt(mcFade:MovieClip,fadeDuration:Number,fade:Number) { _mcFade = mcFade; _fade = fade; _fadeDuration = fadeDuration; _mcFade.addEventListener(MouseEvent.ROLL_OVER, fading); _mcFade.addEventListener(MouseEvent.ROLL_OUT, fading2); } //Functions ---------------------------------------------- public static function resizing(evt:MouseEvent):void { TweenLite.to(_mcSize,_scaleDuration,{scaleX:_scaleX,scaleY:_scaleY}); } public static function resizing2(evt:MouseEvent):void { TweenLite.to(_mcSize,1,{scaleX:1,scaleY:1}); } //------------------------------------------------------------------- public static function fading(evt:MouseEvent):void { TweenLite.to(_mcFade,_fadeDuration,{alpha:_fade}); } public static function fading2(evt:MouseEvent):void { TweenLite.to(_mcFade,1,{alpha:1}); } } }

1) You're storing all the parameters as static vars which means every time you call fadeIt() or resizeIt(), you're overwriting those with new values. So if you fadeIt(mc, 0.5) and fadeIt(mc2, 0.3), mousing over mc will actually cause mc2 to fade to 0.3! Worse yet, if you do resizeIt(mc, 3, 3) and then fadeIt(mc, 0.2) and mouse over mc, it will not only fade to 0.2 but it will scale to scaleX of 0.2 and scaleY of 3 (notice scaleX is now the alpha value). 2) Be VERY careful about using MOUSE_OVER/MOUSE_OUT instead of ROLL_OVER/ROLL_OUT. A lot of people make that mistake. MOUSE_OVER/MOUSE_OUT will get called every time the mouses goes over/out of any of the DisplayObjectContainer's children! So it could fire many times with a single rollover. 3) You're limiting your flexibility with this class - what if you want the tween to be 0.5 seconds instead of 1? What if you want to change the ease for a particular tween? Maybe you don't need to factor those things in, but I figured I'd mention them. First of all thank for your reply! 1- Will it help if I dont make them static. 2- Thank you for the advice. I will change this to ROLL_OUT. 3- Well my class is not done yet, I will add more parameters. So, in general yuo wouldnt recommend to do a class like this one? Thanks a lot!

Hi, This morning I started creating a class with a set of predefined effects that I use most of the time using TweenLite, the reason I want to do this is to save time adding eventListeners for every movieClip I want to tween, but I was wondering if you see a problem by having TweenLite nested inside this class, will this eventually slow TweenLite down if it is use in multiple places in the same FLA? I dont really see any issues but I want to hear from the experts. Sorry if this is a $tU&% question! Thanks a lot. package { import com.greensock.*; import flash.display.*; import flash.events.*; public class Effects extends MovieClip{ public static var _mcFade:MovieClip; public static var _mcSize:MovieClip; public static var _parameter1:Number; public static var _parameter2:Number; public function Effects() { trace("this is the constructor"); } // Methods------------------------------------------------------ public static function resizeIt(mcSize:MovieClip,parameter1:Number,parameter2:Number) { _mcSize = mcSize; _parameter1 = parameter1; _parameter2 = parameter2; _mcSize.addEventListener(MouseEvent.MOUSE_OVER, resizing); _mcSize.addEventListener(MouseEvent.MOUSE_OUT, resizing2); } public static function fadeIt(mcFade:MovieClip,parameter1:Number) { _mcFade = mcFade; _parameter1 = parameter1; _mcFade.addEventListener(MouseEvent.MOUSE_OVER, fading); _mcFade.addEventListener(MouseEvent.MOUSE_OUT, fading2); } //Functions ---------------------------------------------- public static function resizing(evt:MouseEvent):void { TweenLite.to(_mcSize,1,{scaleX:_parameter1,scaleY:_parameter2}); } public static function resizing2(evt:MouseEvent):void { TweenLite.to(_mcSize,1,{scaleX:1,scaleY:1}); } //------------------------------------------------------------------- public static function fading(evt:MouseEvent):void { TweenLite.to(_mcFade,1,{alpha:_parameter1}); } public static function fading2(evt:MouseEvent):void { TweenLite.to(_mcFade,1,{alpha:1}); } } } FLA file Effects.resizeIt(rec,1.5,2); Effects.fadeIt(rec2,.5);

I had to come back to thank you again for your help!

Thanks a lot!

What I don't know is how to get the value from the input Field and use it in TweenLIte class. Sorry! but most of what I do are animations using TweenLite, so I only know a little bit of actionscript 3.0 (still learning) that's why I said that if you don't have the time I will understand it since this has nothing to do with your wonderful tween engine. Thanks

First of all thanks a lot for your reply. I know I know, but could you please help me with the code for the text fields? Sorry! I will understand if you don’t have the time for this.

Hi, This is my first time working with inputFields in Actionscript 3.0 and I’m lost. What I want to do is create two input fields and one button, one inputField to control the X position of a movieClip and the other inputField to control the Y position of the same movieClip and be able to use the button to tween it with a CLICK event, to the position specified in the input fields. Can some be so kind and show me how to do something like this? Thanks

Make sense, thanks a lot! I was going to refer to some questions I know I already asked and got really good answers that's all. Thanks

Hi, Why is that I cannot find all of my posts, I don't see any posts posted before 2009. Any idea? Do old posts get deleted? Thanks

Thanks a lot!

Thanks a lot! This is exactly what I was looking for.

Hi, I was trying to cancel a glow after its done using the remove:true propety but it doesnt work, it doesnt remove it. This is the code: import com.greensock.*; TweenMax.to(mc1, .1, {glowFilter:{color:0x91e600,alpha:1, blurX:5, blurY:5,strength:10},remove:true,overwrite:0}); Any idea why it is not working? Thanks

Hi, Excuse my ignorance but what would be the best way to reuse my tweens? In other words I have some tweens and I would like to apply them to multiple movieClips (mc1, mc2, mc3, mc4...) without having to re-write my tweens over and over. I know this is more of an actionscript question but if someone can halp me to minimize the amount of code it would be great. TweenLite.to(mc1, .8, {x:300}); TweenLite.to(mc1, 1, {delay:.8, scaleX:2,scaleY:2,overwrite:0}); TweenLite.to(mc1, 1, {delay:2.1, scaleX:1,scaleY:1,overwrite:0}); TweenLite.to(mc1, .8, {delay:2.9, x:560,overwrite:0}); TweenMax.to(mc1, .1, {delay:1.6, glowFilter:{color:0x91e600,alpha:1, blurX:5, blurY:5,strength:10},remove:true,overwrite:0}); I would like to use this set of tweens for mc2, mc3 etc. Thanks

Thank you Jack!

Hi, I will probably ask for too much but I was looking at the new greenSock page and I like the intro, so I was wondering if Jack could show me how to create the animations used in for the intro, I like the way the text smoothly appears and disappears, I know it is kind of complex intro since it is using some particles, but I would nice if you could show me how to create some of the text effects or at least give me some ideas on how to do it. I could probably create something like this but I would like to see an expert using TweenLite/TweenMax... for something like that. Thanks a lot! Oh, I would like to see the TweenLite engine as part of Flash ( I can't believe Adobe hasn't considered it).