Jump to content
Search Community

Simple slide up/down animation on flexbox-based layout

klon test
Moderator Tag

Go to solution Solved by Diaco,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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 !


Link to comment
Share on other sites

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){  
  • Like 3
Link to comment
Share on other sites

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

  • Like 5
Link to comment
Share on other sites

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 ;-)

Link to comment
Share on other sites

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 !

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...