Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Bakke

Creating a slidedown effect without knowing the div height

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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.

×