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.