Jump to content


Tween expandable Div to what the content forces the height to

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

I have a div that does not have a set height because it expands to the height of its content, and its content changes. When the content changes, I want the div's height to animate to the final height.


I don't know in advance what the new height will be. As soon as (or just before) the new content is added, I want to tween the height of the div to its new unknown height. I cannot set an explicit height on the div because it has dynamic content that will expand it further.


How do I do this? I can't remember how we did this in my days as a Flash developer. 



Link to comment
Share on other sites



You could try a from() instance, like that the element's initial height will be 0 and the engine will record the original height, then you can play the tween to show the element:

var element = documentGetElementById("element"),
    tn = TweenMax.from(element, time, {height:0});


If your element has images you could preload the images via ajax and when they're completed call that code through a function and before that set the element's opacity to 0, then create the tween, set the opacity back to 1 and play the height tween.


I remember creating a drop down menu like this, is the same principle. I'll look for it, create a codepen and post it back.




Link to comment
Share on other sites

Thanks, Rodrigo.


I just tried that, after trying a similar idea that I found on the forums, and neither worked. They are both tweening the div's height to what the previous height was, not what the new unknown height ends up being set to by the dynamic content being added to the div.

Link to comment
Share on other sites

// save the current 'short' height
var oldheight = element.height();

// add new content to element. element's new height should now be taller

// tween height from the shorter height to its current height. clearProps
// removes the height style after the tween, so you have a 'dynamic'
// height element again
TweenMax.fromTo(element, 1, { height: oldheight }, {
  height: element.height(),
  clearProps: 'height'

See the Pen IowmL by jamiejefferson (@jamiejefferson) on CodePen

  • Like 1
Link to comment
Share on other sites

Thanks, jamiejefferson.

That also did not work. I am appending content to the div with .htm(), so this is much tricker than thought.

Link to comment
Share on other sites

What do you mean by it did not work? Did you check out the codepen which shows this working? I've modified

See the Pen fJLmh by jamiejefferson (@jamiejefferson) on CodePen

to use the (I assume you mean) .html() method to alter the content and it still works...


I can't figure out why .html() would cause this pattern to just not work, so if you could provide a test case that shows the problem (perhaps you could modify

See the Pen fJLmh by jamiejefferson (@jamiejefferson) on CodePen

) we could work out exactly whats going on.


No matter how you implement it, the steps pretty much need to be:

  • get the current height to start the animation from
  • clear anything from the element that would prevent its height from adjusting automatically
  • add new content then record what the new, final height is
  • animate from the start height to the final height
  • Like 2
Link to comment
Share on other sites

Hi Jamie, 

Thanks again, and sorry about the late reply, Mate. I was pulled away from the project for a couple days. I will be back it in a day or two and I will follow up with more detail accordingly.


But I did look at your example and I have to modify it a bit because when new content is added, the div can go from a height of about 100px to about 500px whenever instantly. Your example doesn't demonstrate the precise functionality I am looking. More later.

Link to comment
Share on other sites

No worries. If that solution doesn't match your needs then I guess I don't understand what you're asking for. I think we're going to need a better description, or better yet a live example, of what you are trying to achieve here.


Just to clarify, are you saying that you can't do the following in your project?

  • Save the height of the div (e.g. currently 100px)
  • Clear any height styles from the div so that its height is automatic again
  • Add content to the div that causes the height to instantly change (e.g. now 500px)
  • Tween div height from start to final (e.g. 100px to 500px)
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.