Creating a slidedown effect without knowing the div height

[Bakke 0 Likes (Newbie)]

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

[ZachSaucier 7,162 Likes (Superhero)]

Hey Bakke and welcome to the GreenSock forums.

 

This is actually a fairly common question. The trick is to .set() the element's height to "auto" (so that you can get the real height) and then immediately after that use a .from() tween with a height of 0. That way it will animate from 0 to that height of "auto"  

 

In your demo it would look like this: 

See the Pen yLLEgeK?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Check out this thread or others on the forum for more implementation ideas: 

See the Pen Bzhji by GreenSock (@GreenSock) on CodePen

 

[Bakke 0 Likes (Newbie)]

Works like a charm

Thanks!!!