benderhune

Yes, that works perfectly! Thank you very much . I didn't know that putting the timeline within the jQuery click event would make any difference (pardon my JS ignorance, I'm still new to it!)

Hello fellow Greensockers! I'm prototyping a method for arranging content on a page to prevent visitors from having to scroll through butt-loads of content. The method I'm trying to use is to shift the content divs over, slide them up, then stick them at the top of the the stack of div blocks. Here's what I have so far to help you visualize: http://jsfiddle.net/4zzaY/4/ Each one of those colored blocks represents a div full of content. Originally I wanted to also have the jQuery .click() method alter the actual HTML ordering of the Divs, and change them the css positioning from relative to absolute and back to relative, that way they would automatically stack up on their own. However, I am not aware of any method to alter the arrangement of HTML with Greensock, jQuery, or javaScript in general. So what I ended up doing is keeping every element positioned absolutely and animating them that way. My problem is that I'm noticing an issue, after the user has clicked on every single one of the buttons, they can no longer fire. I'm guessing this is because after the animation is fired, it's considered complete and no longer run-able. Unfortunately, I can't use any methods to reverse the timeline because that would alter the positioning of the elements. I considered the yoyo method but I believe that only works for tweenMax, not timelines? And even so, I'm not even sure that method would work anyway. I suppose even though my current method isn't exactly ideal, it still works with the exception of the animations not being able to fire twice.

Rodrigo, I was looking at the Fiddle you supplied but I'm noticing that even after I speed up the animation, it's a little buggy finishing up the animation when you hover over the animating div. It's either really not smooth or the div just runs away lol. I feel as if I can live with the ease animation issue, more importantly though, do you have any thoughts on how I can take care of my other problem? It's really the only thing preventing me from actually implementing it to my website. Not sure if you saw my edit from my previous post but this is what I wrote: Thanks!

Awesome! Thank you so much for helping me, you guys rock. I attempted to use a tweenLite timeline but I wasn't having a whole lot of luck with it, I didn't realize the information had to be stored in a var. Edit: Two final questions though. -I'd like the easing animations to be different on when the mouseOut event occurs. With the last Fiddle you sent me, when you reverse the animation, the easeOut animation displays first, then the element disappears. I've tried using the overwrite:"all" and "auto" method and redefining the ease method on the mouseOut event, but that seems to screw up the whole animation. Is there a way to make that happen or will I have to write a separate tween to do that? -As I said before, I want to use this animation for a navigation menu. The only problem is that when one link is hovered, the box is displayed under all of them. Is there a simple way to make the box only appear under the hovered element? Or will I have to tough it out and just write a script for each individual navigation item? Here's a forked Fiddle to demonstrate: http://jsfiddle.net/K6mxC/11/ Carl, thanks a lot for digging that out for me! Ohhh the world of Javascript is very exciting.

Right, of course it would help to have the code to see... Here is my JSFiddle: http://jsfiddle.net/K6mxC/2/ I have changed the method in which I try to achieve "pinching." Instead of using the skewX() command, I realized that by adding transform perspective and 3D rotation along the X axis that I could achieve almost exactly what I was planning on doing. The pinch does in fact work, however, I have found that I have a whole slew of new problems. When I was originally setting up the code I had everything centered. It took me a rather long time to figure out how to get the child div (the #box element that shows up) to move in relative position to its parent (which is necessary because this animation will be used in a navigation menu.) So my current problems are these two: 1) For some reason the div #box will animate to its proper location, but the animation sequence is making the #box div originate far from the left. It originally originated from the center and flipped forward, but now it's inexplicably way out in left field and I have been unable to figure out how to make it start in the center. It seems that the div is being created from the top-left corner, though that makes no sense because the transformOrigin point is (50% 50%). 2)This is probably more of a jQuery selector issue (bare with me, I just started learning JS, jQuery, and GSAP a week ago) but for some reason, when I try to convert the animated div from being selected by an ID to a class, the animation no longer works. The div appears invisible or doesn't display at all. I would assume this has something to do with the fact that the final function has 2 elements called. It seems to work just fine when .hover me is a class and #box is an ID, but as soon as I convert everything to .box, it completely fails. Thank you for your help!!!!

What I'm trying to do is create an effect similar to the iOS-like window minimization effect, only it will as a hover function. I have most of it put together so far, but what I came to GSAP originally for, I'm finding to be very difficult (yup, I converted from previously using CSS3 for animations.) I thought the skew command would work but it's not doing what I'd like. Basically what I want is for the top 2 corners of a box to pinch inward, then tween into a full square. The point of this is to make it appear that it's coming flying at you from far away, much like the text from our favorite Star Wars movies. I tried combining skews but that didn't work, neither did applying both positive and negative skews within one tween. Does anyone know of a way to do this (with GSAP or otherwise)? I could very easily create the animation in Flash, but I'd like to avoid Flash at all cost. I've seen some somewhat similarities to what I'm looking to do. On this website (http://fff.cmiscm.com/#!/section/sheeps) the title card animates one corner at a time, which is very similar to what I'm trying to do. For reference, the object that's being animated is a simple rectangular div with a solid background (for now, but I will use an image in the future once testing is complete).