Jump to content
GreenSock

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

Setting Height to 0px and tweening to auto with TimelineMax

Go to solution Solved by Carl,

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

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

Link to comment
Share on other sites

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

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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!

  • 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.
×