[Setting Height to 0px and tweening to auto with TimelineMax]

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!

[Setting Height to 0px and tweening to auto with TimelineMax]

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

[Setting Height to 0px and tweening to auto with TimelineMax]

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.

[Setting Height to 0px and tweening to auto with TimelineMax]

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.

[Setting Height to 0px and tweening to auto with TimelineMax]

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

[Opacity not changing]

autoAlpha works nicely, thank you. Also, I got rid of the display properties. My actual problem ended up to be the sequence timing, though. it is now working. Thanks for your quick response, Jonathan.

[Opacity not changing]

In the example codepen I have two divs overlapping each other. During the tweenLite activity the first div fades out and at the end needs to fade back in. It appears that it's opacity seems to remain at 0. In otherwords, the div with the button should reappear.

 

Does anyone have a solution?

See the Pen vapCs by jsring (@jsring) on CodePen

[Objects' tweens moving inconsistently after replay in Timeline]

Thanks, Carl!

 

I really dig the amount of help and great info you guys give. When I started this little project, I was asked to use Adobe Edge but I insisted on using gsap alone for performance reasons. I have not been disappointed. One of the original scenes that I created for this project, which unfortunately ended up getting cut out, was

See the Pen EiDpt by jsring (@jsring) on CodePen

entering the stage as a series of rings which I created with only a precious few lines of code. It worked out so well it cemented my belief that I had made the right choice about using and gsap. That part of the project was also my first ever code pen. I hope to be able to duplicate this kind of efficiency for every future tween.

 

You guys are the best, thanks again!

[Objects' tweens moving inconsistently after replay in Timeline]

Rodrigo, You're the man, thank you, that worked for now. In the future I'd love to figure out how to recreate what I did with only a few lines of code, converting all of those tweens into some kind of function, or finding some other method to create the randomness that I need to happen.

 

Thanks again!

[Objects' tweens moving inconsistently after replay in Timeline]

 

 

Usually when a timeline plays fine once, but different on repeat or reverse its because you have conflicting tweens meaning that multiple tweens at the same time are trying to animate the same properties of the same object. 

 

Thanks for the comments thus far. Here is a culled-down codepen with just the dudes and the play controls:

See the Pen JdazF by jsring (@jsring) on CodePen

 

Carl, The quote above from your post is exactly what I believe is causing the problem. I am certain that I am tweening conflicting properties with the dudes, and I even know why. The problem is that I don't know how not to. I have a bunch of guys floating around for fifteen seconds or so, but 80% of the way through, some of the dudes need to change their course dramatically and organically. I am not sure if I should have tried tweening this with bezier curves or something, but with the randomness of direction it seems math could do this for me, instead trying to plot a hundred bezier coordinates. I believe there must be a way to solve this problem of moving the dudes and then course correcting for the subset of dudes using a lot less code. I really appreciate the effort you made thus far in helping me out.

 

Note: the problem is especially clear when the dudes get circled after being scrubbed or repeated. You'll notice they just stop and then jump to a random location.

[Objects' tweens moving inconsistently after replay in Timeline]

I'm almost finished with my first greensock-driven HTML animation and I am running into a problem with how I created some randomly positioned elements that also tween to random positions in a specified x/y range.

 

The situation is that I needed to place about 20 or so little dudes on the stage and have them appear to float around organically. Then a subset of them needed to be tweened separately than the rest, so they could get circled and get pulled into a funnel. The first time the animation plays the tween works fine, but after a replay instance, or if scrubbing back and forth, the elements pause in place for a few seconds and then the tween hops around disrupting the smooth organic feeling of the floating dudes. I've posted a codepen and a also a demo file for viewing here, respectively:

See the Pen lsDvk by jsring (@jsring) on CodePen

| demo

 

Perhaps what could have solved the problem would have been to create each instance of the little dudes in a more programatic way and have them each tween around the stage more randomly rather than coding them the way I did with specific times. I tried that at first, but even with their positions placed using Math.Random they all followed the same exact random path. I would love to get some insight on how I could have done this more smarter. I appreciate any help. Also, I am relatively new to Javascript. Thanks!