Height is not being seated well in TimeLine

[Gabuardi 1 Likes (Newbie)]

I'm doing an animation to show an order summary, I want first expand the width and then the height to create a fancy effect but seems that height is being seated wrong because in the end of the animation it has an extra height not desired. Help! 

 

Both tweens works well individually but the problem is when I put them together.

 

Expected:

 

Current:

See the Pen MWYJMJK by GabuDev (@GabuDev) on CodePen

[ZachSaucier 7,127 Likes (Superhero)]

Hey Gabuardi and welcome.

 

@GreenSock will need to look into this. It looks like it's getting the end height wrong because of the first tween for some reason. If height is included in the first tween it works fine. If the width tween is removed it works fine. The height is also the correct value before the first tween is ran so the tween is changing the height in a funny way so far:

See the Pen gObmpdv?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Sorry for any trouble that this caused you, Gabuardi! Thanks for bringing it to our attention.

[GreenSock 18,239 Likes (Superhero)]

I don't think this is a bug. When you set the width of the element to a very small value, it causes a reflow of the content, so text wraps for example. That makes the height taller, affecting the ending value of the from() tween. 

 

Am I missing something? 

[ZachSaucier 7,127 Likes (Superhero)]

Ya, you're right, it does make sense the way that it is. I guess the proper way to do it in GSAP 3 would be to use a .to() of height: "auto" instead:

See the Pen zYxwxrP?editors=0010 by GreenSock (@GreenSock) on CodePen

 

Or .fromTo()

See the Pen PowmwZM?editors=0010 by GreenSock (@GreenSock) on CodePen

[Gabuardi 1 Likes (Newbie)]

Oh its true, thanks both of you! In the end I didn't use the animation anyways haha.