edbras

Are there any JS lib's that contain common effects/transitions like slide-in,slide-out, flip-in, flip-out, ... (common in many web apps) that use the Greensock lib? Many of these common animations can be done with GreenSock, but costs some code and tweaking (and sometimes headache). It would be nice if there exists a Js lib that contains all these common effects and does al the coding. Example, in case of slide-in (out): wrapping the html element and changing the height/margin, etc... I think many of these common effects are contained in this forum in raw forum. It would be nice if there are contained in some Js lib. It probably exists, but I don't seem to find it - Ed

Sorrrrry for the very late reply. I forgot to turn on post-notifications and was at some 24 hour hakacton . Anyway thanks for the reply. @Diaco. My use case is listed here: http://codepen.io/edbras/pen/OPJZoy(I forked yours), and as you see, it works just fine. I just discovered I had some stupid bug in my code ...: when opacity wasn't set on a div, it returned "0", such that no fade occurred the first time till it was explicitly set. I changed it and works fine now. Sorry for the stupid bug and thanks for all the feedback, - Ed

I will, but need some time for that as I generate the js from java, so I hope I can reproduce it. But can you tell me when the GSAP decides to not perform the animation? (I just test a bit more and noticed that it has dimensions when the tween.to() method called)

I notice that a fade (using autoAlpha) doesn't occur when I create a new div, add it to it's parent that is visible on the screen, and directly perform a fade (autoAlpha change from 0 -> 1). However, if then replace it with some other div, and latter add it again, the animation does occur. Why? Apparently because it was already created has impact on the GSAP to decide that animation is allowed, maybe because it has dimensions ?... Why is this and how can I ensure the animation always occur? - Ed

Thanks for the clear insight. I wasn't aware of this impact. Didn't know that try/catch was so slow in JS...

How can I set a (global) onError handler/listener such that I am informed about exceptions that occur during tween updates? Sorry, it might be in the doc's but I couldn't find it. - Ed

I really like the second slide in that you created with the "bottom:0px", very nice and creative. I played some time with it, and would expect that the second slide is slightly faster as it concerns only one tween. However, on my iphone 4s (IOS7) I can't see any difference. At least not in this simple example were only little happens. I slightly prefer the second slide Thanks again for your input...

Wauuu great, thanks for all the help and code examples. I will study them Thanks a lot...

Hi Jamie, Thanks for the quick help. As you probably noticed I am not a codepen/Js guru yet ... But: How efficient is this? I noticed you use the top in your tween, and I understood it's better to use the x/y. I just did, and it works, but I am not sure what is better in this context? Can it maybe be done in one tween? Or is it better to change the margin in the tween?

Please some help on the following try out: http://codepen.io/edbras/pen/zGgcx I want to create a "slide in" effect, that is: a child that is added to it's parent div, and is shown through a slide in effect, pushing away the children around him during the tween. So in my try out: I want to slide (down) in the box, such that it pushes away the green content below it during the tween, such that the green content is moving a long. My current problem is that it's pushes the green content at the beginning of the tween, such that a gap is shown during the tween. And how to perform this kind of slide in most efficient such that it performs well on mobile? Note: I found a lot of slide show examples but couldn't really found a similar example with not using absolute positioning, and not knowing the dimensions before hand.

Thanks, it works now, I had a little bug in my code (not the errors in the example above, those were just copy/past mistakes), sorry...

Yes, true, completely forgot, so stupid... simple I could have used the demo code, there is plenty around on codepen....

Here it is: tw = Tweening.from(element, 2, {autoAlpha: 1}; tw.isActive(); // undefined/null ... // after a 1s delay, when the tween is still running. tw.isActive(); // undefined/null Notes: The animation runs well. In my java code I receive a null, as such I am not sure it's undefined or null in JS, as both are mapped to Java null. If you want me to debug the JS method, let me know?

The JS api doc's say that the duration of a tween has to be in seconds. Can this be values less then 1s, like 0.6 (600ms), or 2.54 second? I think so, just checking, as I am not completely sure...... Or does it round/truncate the numbers? Thanks

I tired it (rc 8 from above download), and noticed that on a Tween instance isActive() sometimes returns "undefined" (null in my java code). Is that expected behavior? Shouldn't it always be true or false ?

Yes, solved, works great, no errors, just nice animations BTW: I noticed there isn't a method "isTweening()" on a tween instance. There does exists a static method, but I have a tween instance and want to check if it's running. I though about performing "tween.progress() > 0 && tween.progress() < 1" to check if it's running. Is that the way to go?

Hi, Your are fast... just like GSAP ... I agree what you are saying. The "main flow" must be super fast, but a fall back in case it's not an Array, as an extra check is nice. What I understand, that what you did. And yes, I expect more people using GSAP as well. I build a wrapper such that it can be used in a friendly/efficient way from GWT directly. I am planning to drop it as an open source such that others can use it. I just have to find a moment to do this (isolate the dependencies) . Wrapping it cost a bit more time then I expected, because of the strongly typed behavior of Java, and not supporting closure (yet).. Just tested, it and it's almost solved. Its recognized as Array, so the add method with array works. However, when adding a function (instead of a tween), I do get the following error: I get this JS error in Firebug: TypeError: v is undefined ...instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !... 166 TweenMax.js (line 6109) What I do: Add a tween, which works. Add a function to the timeline that doesn't work because of the above error. The error occurs in the following code: v = this.vars[p]; if (_reservedProps[p]) { if ((v instanceof Array) || (v.push && _isArray(v))) if (v.join("").indexOf("{self}") !== -1) { this.vars[p] = v = this._swapSelfInParams(v, this); } And when the error occurs, the value of p is "onCompleteParams". The value of this.vars: linke Any idea?

Let me give you more details: The "instanceof Array" has nothing to do with GWT, it's just that I am trying to use the lib through GWT, such that I encounter the problem. But I will also encounter this problem when calling the lib through html frame as explained in the link provided in previous post: linke. It also has nothing to do with GWT designer, I don't even use it. I like it the old fashion way as I have build my own gwt tools/components in the mean time. Example: the GSAP method I call (more methods have the same problem): TimelineLite.add(values, position, align, stagger); javadoc: linke As values: an array of tweens, example: tl.add([tween1, tween2, tween3], "myLabel+=2"); Calling this method from a frame, results in the following error: throw("Cannot add " + value + " into the timeline; it is not a tween, timeline, function, or string."); // line 103 in TweenMax uncompressed. It's because of this line of code in TweenMax uncompressed: if ((child = value[i]) instanceof Array) { // (line 48 TweenMax uncompressed). Additional explanation why this fails, see this post in the GWT forum: linke If you need more details, let me know.

I noticed the Greensock is using "instanceof Array" conditions in if statements. This has some known problems like explained in this link. Because of this I can't use some methods in which I specify an array of tweens/timelines in which greensock does a check on this through "instanceof Array" such that it shows an error as it detects it's now an array, where as it sure is an array. It's because I am using the greensock lib from within a frame (through Google GWT). Any workarounds? Idea's on this "instanceof Array"? will this be changed in the comming release for example? Thanks, - Ed

I was doing some more experimenting and found out the following workaround that seems to work: nest the button in another movieclip symbol. This seems to work fine. Is this the way to do it ? In the roll over/out you simple access the nested button. The code: function pRollNew(evt:MouseEvent) { var target = evt.target.button; TweenMax.to(target, 0.2, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut, glowFilter:{color:0x000033, alpha:0.4, blurX:8, blurY:8}}); } function pOutNew(evt:MouseEvent) { var target = evt.target.button; TweenMax.to(target, 0.2, {overwrite:1, scaleX:1, scaleY:1, glowFilter:{blurX:0, blurY:0}}); } Ed

Hi Again, I tried it but didn't work .. I have to say that the behavior is improved but it still enters a infinite flickering loop at the edges (especially the bottom edge) Why is it hard to find workarounds on google about this ? ... (or is it just me ) Is the following correct?: function pRoll(evt:MouseEvent) { var target = evt.currentTarget; if (target.hitTestPoint(mouseX, mouseY, true)) { TweenMax.to(target, 0.2, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut, glowFilter:{color:0x000033, alpha:0.4, blurX:8, blurY:8}}); } } function pOut(evt:MouseEvent) { var target = evt.target; if (!target.hitTestPoint(mouseX, mouseY, true)) { TweenMax.to(target, 0.2, {overwrite:1, scaleX:1, scaleY:1, glowFilter:{blurX:0, blurY:0}}); } }

Ok, thanks, I will have a look at it.

Yepppp, loving it already ... I thought about maybe bouncing into a buggy place seen his behavior but didn't expect it... Yep: I removed the glow filter and it works fined. Could you give me a few more words/pointers about this workaround you mention (hittest())? I googled a bit but it's hard to find the correct info Thanks, Ed

Hi all, I am a bit new, read many of the samilar posts, but can't figger out how to resolve the following issue: Flickering effect when performing a roll-over on a button .. I tried several settings (also ones from this forum), but keep getting the same error. Here is the button: http://sub.ited.nl/Button.html (and the fla: http://sub.ited.nl/Button.fla) Just move the mouse in from different sides and you will see that the button will shrink again when you have rolled in, which means that a roll out is triggered even when it's inside the button. I noticed that this is more fragil when moving inside the button from the bottom or sides. If you move in the button slowely from the a side you will get in a infinite loop: roll-over/roll-out... The code (using the latest greensock version): import com.greensock.*; import com.greensock.easing.*; btn1.buttonMode=true; btn1.useHandCursor = true; btn1.mouseChildren = false; btn1.addEventListener(MouseEvent.ROLL_OVER,pRoll); btn1.addEventListener(MouseEvent.ROLL_OUT,pOut); function pRoll(evt:MouseEvent) { var target = evt.currentTarget; TweenMax.to(target, 0.2, {scaleX:1.1, scaleY:1.1, ease:Elastic.easeOut, glowFilter:{color:0x000033, alpha:0.4, blurX:8, blurY:8}}); } function pOut(evt:MouseEvent) { var target = evt.currentTarget; TweenMax.to(target, 0.2, {delay:0.2, scaleX:1, scaleY:1, glowFilter:{blurX:0, blurY:0}}); }