peterPotter

I have a form with some text fields, a select list, and a submit button. I am simply passing the form as a jQuery object to TimelineMax, so that TimelineMax can animate all the form's DOM elements: timelineMaxAni.staggerTo($(form), aniSpeed, props2, 0.04); Everything is fine so far. Then later, I do a reverse on the timeline: timelineMaxAni.reverse(); The reverse animation runs fine, too. The Problem: The select list drop-down shows up under the submit button after the timeline reverses. And no matter how much z-index I add on the select list or the submit button, the submit button continues to be above the select list drop down. This problem only occurs after the timeline reverses. Look at the attached screenshot. It shows the drop-down from the select list under the submit button.

Hi Jamie, Thanks again, and sorry about the late reply, Mate. I was pulled away from the project for a couple days. I will be back it in a day or two and I will follow up with more detail accordingly. But I did look at your example and I have to modify it a bit because when new content is added, the div can go from a height of about 100px to about 500px whenever instantly. Your example doesn't demonstrate the precise functionality I am looking. More later.

Thanks, jamiejefferson. That also did not work. I am appending content to the div with .htm(), so this is much tricker than thought.

Thanks, Rodrigo. I just tried that, after trying a similar idea that I found on the forums, and neither worked. They are both tweening the div's height to what the previous height was, not what the new unknown height ends up being set to by the dynamic content being added to the div.

I have a div that does not have a set height because it expands to the height of its content, and its content changes. When the content changes, I want the div's height to animate to the final height. I don't know in advance what the new height will be. As soon as (or just before) the new content is added, I want to tween the height of the div to its new unknown height. I cannot set an explicit height on the div because it has dynamic content that will expand it further. How do I do this? I can't remember how we did this in my days as a Flash developer. Thanks.

I just want to stop by and say Thank you very much, Jack, for this ScrollToTop plugin. It has helped me quickly (and beautifully) fix an issue I had on iOS devices with my app.

Jack, Thanks. I will post my findings in a few days after I launch my app. I am almost done.

I have found the reason the delay was not working: Whenever I call any of these (tl.removeCallback(), tl.kill(), tl.clear()) methods, the delay() method does not work. And it doesn't matter whether I add those methods before the delay () method call or after it, delay simply doesn't work when any of those methods are called. I just went back and analyzed how the entire code is executing and I have fixed the problem. I simply added an if statement to only removeCallback or kill or clear, if the browser had cached the tl object. I am good now. Thanks very Jack and Rodrigo.

Thanks for the prompt reply. 1. I purposely removed some of the code when I posted it here, like the initialization of the boxesParent. My code doesn't have erros, and I do have the boxesParent defined, but it is good that you have make note of this. 2. At what point specifically should the shiftChildren() be called? 3. It looks like I am using version="1.9.6" of TweenMax. I donwloaded the files a couple weeks ago. All the animations and everything else is working fine, except for the delay. In fact, I don't think I have ever gotten the tl.delay() method to work, although I did get the delay property to work when I added it to vars object. But I don't want to use the delay property, because I want to delay the entire timeline, not just a couple animations. Could you change the subject of this post? Simple removed this "Arrggg: " Thanks.

I have a straightforward TimelineMax code (seen below) and I can't get the TimelineMax .delay method to work. It is not working at all. var tl = new TimelineMax (), delayTime = 8, box1 = $(".box1"); tl.delay (delayTime); tl.shiftChildren (delayTime, true, 0); // EVEN this is not working (I used this just as a test, since delay is not working) tl.set (boxesParent, {perspective:400}); tl.to (box1, 0.7, {rotationY:-125, transformOrigin:"right top", ease:Expo.easeOut, onComplete:hideDiv, onCompleteParams:[box1]}, "initAni"); // Other code removed for brevity.

I found the problem: On Firefox, you have to set the perspective on the immediate parent of the div that will be transformed. I had the perspective on the parent's parent. It is now working fine on Firefox, after I set the perspective on the immediate parent of the div. But I have another weird problem (which I just fixed). This time it is on Chrome. When the transformed div has a background color (any color) and visibility set to hidden, the div is shown as a black box just before the animation starts. If I remove the background color or remove visibility:hidden, the problem goes away. I solved the problem by using opacity:0 instead of visibility:hidden. You can try it yourself, hide the div first (visibility:hidden and a background color in the css), then do the transformation. On Chrome only, you will see there is a black box quickly before the animation starts. The black box disappears once the animations starts—I presumed once visibility:hidden is removed that is when the black box goes away. Thanks for all your help. I am good now.

Thanks for the info, Carl. Those links did work correctly in Firefox. I think I discovered the problem. When I set the perspective on the parent, like this: tl.set(wrapper, {perspective:500}); It does not work in Firefox. But when I set the perspective on each item individually, like this: tl.set(box1, {transformPerspective:200}); It works in Firefox. The big problem for me is that changing to the latter way is problematic because I have to change all my animations, including the rotations amount, because when I set the perspective on individually items, the animation changed quit a bit. How can I get the former example (tl.set(wrapper, {perspective:500}) ) to work in Firefox?

Hello, As noted in the subject, CSS 3D Transforms are not working in Firefox. The transformation has no 3D depth in Firefox. Firefox makes my beautiful 3D transformation (rotationY) looks like a lousy, 90s 2D slide. Note that the animations work wonderfully in Safari and Chrome. I am using the latest versions of all 3 browsers to test. And I am animating with TimelineMax. I am on a MacBook Pro.

Update: I just found my answer: REVERSE_COMPLETE event // Instead of this: navBtnsTimeline = new TimelineMax({onReverseComplete:myFunc}); // I want to do the following: private function animateBtns(arrOfElements : Array) : void { navBtnsTimeline = new TimelineMax(); navBtnsTimeline.insertMultiple(TweenMax.allFrom(arrOfElements, 0.22, {y:"120", autoAlpha:0, motionBlur:true, ease:Expo.easeOut}, 0.06)); } Here is where I want to pass the onReverseComplete function. private function reverseAnimation() : void { navBtnsTimeline.addEventListener (onReverseComplete, someFunc); navBtnsTimeline.reverse(); } Thanks much.

Can the TweenMax ColorMatrixFilter do the color overlay for the virtual lipstick seen in this Flex application? http://www.hsn.com/makeover.aspx?utm_source=hg_tout&utm_medium=makeup&utm_campaign=hellogtout&makeoverpopup=1&cm_re=hellogorgeous-_-makeup-_-link&ccm=BS%20this%20works If not the ColorMatrixFilter, can any of the GreenSock Tweens do it? Thanks.

Thanks for sharing, Jack. What about AS3 OOP books? Any of those you want to recommend? I am happy to post the link, I wish all users of the greensock library get a chance to read the interview. Also, does motionBlur not work with textFields. Whenever I add motionBlur to my textfields, they just jump to the location and do not show motionBlur, nor do they show the regular slide animation. Here: //productOverview2 is a movieClip with a textField

Thanks very much, Jack. That worked. On another, I read your interview at tutsplus.com (great interview--very inspirational; you are a humble young man), and I had a question for you: Which AS3 and/or Flash books were most beneficial to you as a developer, particularly since you were not schooled as a programmer? Here is the link for the great interview, if anyone else needs a bit of inspiration and a good read. You will learn more about Jack: http://active.tutsplus.com/articles/int ... greensock/ Thanks.

I just opened one of my older projects (AS3) to make a change for a client, and I am getting the following error: 1119: Access of possibly undefined property plugins through a reference with static type Class. I am using the older gs package (probably version 10), not the new greensock package. Can I download the gs package somewhere, I am thinking that might fix the error, since one of the files in the gs package I have might be corrupted. Note that I am using TweenGroup extensively. Therefore, I cannot change all my code to use v11. Thanks very much.

Jack, I went to the account link and signup for an account, but it does not recognize me as an existing greensock member, so I can't download the "really green" package I paid for. Thanks.

GreenSock, I have a "Really Green" membership, where can I get the latest updated files? My version is VERSION: 11.101. I downloaded the greensock package sometime last year for my "Really Green" membership. Thanks.

I tried your last suggestion, but now my tween is not as sexy anymore, it appears I lost the easing on "forward" and a couple features: 1. When tweeining "forward," I don't get the easing at all: timelineThumbSeq.tweenTo(timelineThumbSeq.duration, {ease:Expo.easeOut}); 2. I don't have the option for the staggered (0.05) start time 3. I lost the eventListenersm like onComplete and TweenEvent.REVERSE_COMPLETE: timelineThumbSeq.addEventListener (TweenEvent.REVERSE_COMPLETE, goAdd); I simply tried the following to get the complete for both the forwards and reverse (well, not exactly "reverse" but tween to 0), but to no avail: timelineThumbSeq.addEventListener (TweenEvent.COMPLETE, reAdd) ; 4. Is there a reason you set paused:true? 5. On the reverse, timelineThumbSeq.tweenTo(0, {ease:Expo.easeOut}), only the last TweenMax tween is easinng, the others before the last appended one are not easing.

Thanks, but how exactly do I play just the first (forward) part? And then just the reverse part? Here is my code: myTweens = new Array (); myTweens.push (TweenMax.to(myClip_1, tweenSpeed, {x:startingXLoc, y:YLoc, scaleX:scaleAmt, scaleY:scaleAmt, ease:Expo.easeOut})); myTweens.push (TweenMax.to(myClip_2, tweenSpeed, {x:startingXLoc, y:YLoc, scaleX:scaleAmt, scaleY:scaleAmt, ease:Expo.easeOut})); timelineThumbSeq = new TimelineMax({tweens:myTweens, repeat:0, yoyo:false, repeatDelay:0, align:TweenAlign.START, stagger:0.05, onComplete:pauseBeforeGridChange}); // This is my reverse code: timelineThumbSeq.reverse(); I am not sure how to do that with the example you provided.

I have a normal TimelineMax animation with ease:Expo.easeOut, I simply want to use the same ease:Expo.easeOut when reversing the timeline. I noticed that when the timeline is reversing, it is doing the opposite easing, so since I have Expo.easeOut for the forward timeline, it is automatically doing ease:Expo.EaseIn. I don't want the ease:Expo.easeIn at all, I want to do Expo.easeOut for both the forward and reverse timeline animation. Thanks.

I have a movieClip that its registration point in the center, and i want to use transformAroundPoint to all the clip using it TL (0, 0) point. In the eg on the TweenMax page on greensock.com, the transformAroundPoint is using points for the clips's parent, but I want the points to be (0, 0) on the clip itself, thus using the TL rather than the center point.

Sorry, Mate. We were having some major hair-pulling issues trying to fix the aforementioned problem, and we were frustrated, so I posted that message in the heat of the battle, and at that point we were convinced it was a TimelineMax problem. Our fault. We managed to find a workable solution to the problem. I will post a follow up another day, but the issue was certainly not bug in TimelineMax.