Simple slide up/down animation on flexbox-based layout

[klon]

Hi everybody,

 

I'm brand new to GSAP after having been pointed to you today.

 

From what I've seen so far, I'm very tempted to get rid of my jQueryUI functions in favor of jQuery/TweenLite or Max solutions.

 

The thing is, my project's layout is heavily based on flexbox. Therefore, I'm concerned about how GSAP will interact with my flexboxes.

 

I'll start by asking a (rather) simple question. Here is what I need to achieve :

- I have a div which should toggle the same way as it does with jQueryUI's   " .toggle('blind',...)"

- I need this toggle functionality to be triggered on a flexbox with responsive dimensions

 

Can I get such a behavior with GSAP ? How ?

Do I have to be wary of what will happen if I resize my window during the animation ? or between two toggles ?

 

Assuming I have solved my main problem, I'll add a last requirement : what if the flexbox I'm working on has a min-height applied ?

 

Thanks a lot for any advice on how to make GSAP and flexbox work together for the best !

Kisses

[Diaco]

Hi klon , welcome to the GreenSock forum !

 

pls make a Codepen Demo for your questions : How to Create a CodePen Demo

 

for now , pls try this : 

function slideUp(elem){ TweenLite.to(el,2,{minHeight:0,height:0}) };

function slideDown(elem){  
  TweenLite.set(elem,{minHeight:'20%',height:'auto'});
  TweenLite.from(elem,2,{minHeight:0,height:0});
}

[OSUblake]

If you can get flexbox to work with jQuery UI, you can get it to work with GSAP.

 

Here's something I was playing around with awhile ago. The block gets positioned relative to the container after you throw it and it bounces around. But it gets even crazier because you can throw the resize handle for the container around. Try to get both of them bouncing at the same time.

 

How's that for responsive?

See the Pen oXKmNO by osublake (@osublake) on CodePen

[klon]

Thanks for your replies !

 

The code given by Diaco seemed logical to me, so I tried it on one of my flexboxes.

I'm still having trouble, so I made a CodePen this time

 

See the Pen BNXXQg by anon (@anon) on CodePen

 

I need that red section to be togglable.

I guessed the trouble comes from the "flex: 1;" in the CSS, so I added this property to the tweens.

The result is a toggle at the end of the 2sec duration, but no transition.

Not a surprise to me : I guess asking for a transition from flex:0 to flex:1 is not really easy to animate...

 

Any idea on how to perform my flexbox toggle ?

Thx !

 

PS: @OSUblake : sexy bouncing, I got stars in my eyes

[Diaco]

hmm , how about this : 

See the Pen mebbEJ by MAW (@MAW) on CodePen

[klon]

hmm , how about this : 

See the Pen mebbEJ by MAW (@MAW) on CodePen

 

First of all, it works on my example. Thanks ! I'll try it in my project and see if it solves all my slideUp/Down configurations.

 

[EDIT : alright, got most of this figured out by myself... Perhaps...]

 

But, to be honest, I'm puzzled...

 

1) From what I understand after looking at the documentation, you're first building in the variable T the reversed slideUp tween, ie the slideDown. Then, on each click on the header, "!T.reversed()" is used to toggle the reversed() state (true/false). Which means the first click sets T.reversed() to false and triggers the slideUp animation at the same time. Further clicks will then trigger slideDown, slideUp, ..., well, toggle. Am I correct ?

 

2) Assuming I was correct, you are basically reversing a reversed animation. My eyes tell me your code works. But my mind keeps wondering HOW THE HELL DID YOU THINK ABOUT SUCH A TRICK ? xD. I would be highly grateful if you could explain me the reasoning behind such a solution.

 

Following those questions, I needed control over slideUp and slideDown separately. I made

See the Pen PPYopQ by anon (@anon) on CodePen

. Works perfectly on my example ! Sounds reasonable to you ? If so, one last question :

 

3) How can I declare and store a tween in a variable for later, without executing it ? Because I noticed the variable declaration triggers the animation. I'm hoping to declare all my animation tweens on webpage load, then activate a timeline based on those tweens when the user interacts with the webpage.

 

Oh well, too many questions, I'm sick of myself for being useless...

By the way Diaco, love you for helping me, and love your profile picture !