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