Setting Height to 0px and tweening to auto with TimelineMax

[jsring]

Hey guys!

 

I have a div with text placed inside a container with a flexible width which means that depending on the screen width the height of the div will change. I would like to tween the height and alpha so that they start at height: 0px and autoAlpha:0 and on click the height increases to 100% of the text as it fades in. The provided example is part of a much larger timeline in my project and all other aspects of my gsap code are working great.

 

I have read through other demonstrations using the set property, but I have not seen this working with TimelineMax, only with TweenMax. Is there something else I need to do to get my text container to start at 0 and tween to auto?

 

Much appreciated!

See the Pen bNggeQ by jsring (@jsring) on CodePen.

[Carl]

Hello

 

Thanks so much for the demo. Very helpful.

 

The TimelineMax stuff was actually working perfectly to adjust the height, you just couldn't see it:)

 

Step 1: give the text background-color

.text p { 
  background-color:red;
}

test.

 

Step 2: add overflow

.text p { 
  background-color:red;
  overflow:hidden;
}

http://codepen.io/GreenSock/pen/wBgJga

[jsring]

Thanks for the response!

 

Here is a demo of what I am trying to achieve. Note that the text is initially not visible.

 

See the Pen jEywqJ by jsring (@jsring) on CodePen.

 

The problem is, I need it to tween to 100% of the text, rather than 200px. The text might not actually be 200px on a narrower screen.

 

I guess my question is, how do I tween to a height of 100% or auto from 0? Maybe there isn't a solution for that.

[jsring]

Here is another example that demonstrates more of the underlying issue I'm running into in my timeline animation.

 

See the Pen myRwRx by jsring (@jsring) on CodePen.

 

It seems as though overflow: hidden is not being honored by the browser, perhaps due to autoAlpha? The height of the red paragraph should appear to increase at the rate of it's parent container.

[jsring]

I realize now that the overflow: hidden isn't working because the inner container is set to position: absolute.

[Carl]

ha. just beat me! http://codepen.io/GreenSock/pen/LExLdz?editors=011

[jsring]

Carl, your answer was better than mine because you took position: absolute out and it still worked. I thought it needed to be there so jquery could pull that height of that block—my bad. You guys are the best!