Jump to content
Search Community

Creating a slidedown effect without knowing the div height

Bakke test
Moderator Tag

Recommended Posts

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

Link to comment
Share on other sites

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

 

  • Like 1
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...