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 ?