[Creating a slidedown effect without knowing the div height]

Works like a charm

Thanks!!!

[Creating a slidedown effect without knowing the div height]

Hi

 

I'm new to gsap and I'm still learning how everything works.  Right now I'm looking for a way to implement a gsap version of jQuery's slideUp/slideDown functionality.  Sliding up is easy: just reduce the height of the div to 0.  But sliding down is more tricky: when the div starts in its "slid up" state (so with a height of 0, and not having been opened yet), I don't know what its final height should be.  Setting the height to "auto" opens the div, but it does so in one go, not gradually (it is not a numeric value that can be changed one px at a time).

 

What would be the best way to tackle this?  Right now I'm thinking about cloning the div, displaying it off-screen (negative margin or position), opening it, getting the height, and then applying that to the original div.  Since this feels like a "hack", I thought I'd first ask you if there is a better way.

 

EDIT: in the codepen, just press the "slide" button to see the div slide open and back.

 

Thanks!

See the Pen ZEERpyY by Bakke76 (@Bakke76) on CodePen