superunknown

Thank you so much, @Rodrigo!

Hey everyone. I'm trying to use FLIP to animate these cards on hover, but every example I've seen of the FLIP pluing in action uses an onclick event. Is it a bad idea to use it with a mouseenter event? And what should I use for mouseout in case it's not? Would it be better to just create a timeline and animate that back and forth on mouseenter/out? Basically I wanted to try FLIP because I think it's (maybe?) the only way to smoothly animate the layout changing from flex-direction: column to flex-direction: row on mouseenter, and the elements going from display:none to block. Am I wrong here? Thanks!

Thanks Zach! The tween in your example doesn't seem to be doing anything, though. I tried changing a few parameters, just the duration for starters, and it doesn't seem to have any effect.

Ok, so I found a way to get it working exactly as I want, but alas, with no animation. How do I incorporate gsap into this, in order to animate the .content divs?. Thanks! Btw, I got the code working thanks to this video:

Hey Zach! Thanks for taking the time to help! This forums are great. I think I can kind of understand what you're doing, but I have two problems with this approach. 1. Initially, both the first button and the first content <div> should be visible, so if every content <div> must have visibility set to hidden, that's a problem. 2. I can't figure out why, but the content <div>s sort of "jump" to the middle of the viewport when I click on any of the buttons, and the menu sort of dissapears (it's still there, and visible, but just off-screen). Is there any way of avoiding that?

Hey guys. Sorry for the (extremely) noob question, but I'm having trouble wrapping my mind around this type of functionality. What I need, basically, is: Animate adding or removing the the .active class on the links. It doesn't really matter what type of animation, a simple fade in or X translation would do, I'm just not sure where to put the tween in the jquery. Animate adding or removing the .active class on the .content <div>s when clicking each corresponding button on the menu. I'm not sure how to target each div depending on which button you click. Each one has an #id, but I'm pretty sure there must be a way to do what I need with some sort of loop, instead of creating 5 functions (one for each <div>). And I still don't know where to put the animation, same as with the first item. The code in this thread looks almost exactly what I need, but it's a liiiittle too complex for me to follow (still struggling with jquery), and it seems to have a few things I don't really need, like a fixed height for the content and a few other calculations that seem to be unnecessary for what I need (maybe they're not, though!). Can anyone help with this? Thanks!

Hey guys. Sorry for the newbie question, I'm new to both jquery and gsap so I get pretty lost quite often. Been looking around in the forums for a while but I couldn't find an answer for this, or was too dumb to realize it when I found one, so I figured I'd just ask. Ok, so I'm using a button to open both an overlay and a sidebar menu on top of it, this works great, overlay appears, then the sidebar menu, life is good: var tl = new TimelineLite({paused: true, reversed: true}); $('.open-menu').click(function () { tl .to(overlay, 0.5, { x:'0', autoAlpha: 1, ease:Power2.easeIn}) .to(menu, 0.5, { left:'0', autoAlpha: 1, ease:Power2.easeIn}, '-=0.2'); }); What I want to do next is to use a different button (that's inside the just-opened sidebar menu) or a click event on the part of the overlay that shows outside the menu to reverse the animation (so basically to animate both the sidebar and the overlay out). What would be the cleanest way for me to do this? I'm not sure how to create a new function, on a different event, and tell it to reverse my timeline. I tried something like this: $('.overlay, .menu.close').on('click keyup', function(event) { if ( event.target == this || event.target.className == 'close' || event.keyCode == 27 ) { tl.reversed() ? tl.play : tl.reverse(); } }); But it doesn't seem to work. Granted, I don't know what the hell I'm doing, I'm just copying and pasting stuff I find around here. Any help would be appreciated. Thanks!