Problems tweening height to auto

[jjvera]

Hello friends!

I have a problem with tweening a div from height: 40px to height: auto (to expand the height to its content)

 

In the codepen you will see. The problem is at line 7 in the .js, if i change the height: '100%' to a fix value ex. 400px the transition happen smoothly but if a use a not-fixed value it "jumps" to the shape.
How can i solve this? i need the modal to animate depending on the content without much complexity.

 

Have a nice weekend!

.to('.tnd-modal-container', '.35', {width:"100%", height:"100%", borderRadius:"7px"},'modalCloseSurveyTime+=0.5')

CHANGE IT FOR

.to('.tnd-modal-container', '.35', {width:"100%", height:"400px", borderRadius:"7px"},'modalCloseSurveyTime+=0.5')

AND YOU WOULD SEE IT AS I WANT IT TO BEHAVE

 

See the Pen QBYygz by JulianVera (@JulianVera) on CodePen

[PointC]

A little trick I learned from Professor @Carl: 

 

Use a set() tween to set the height to auto and then immediately start a from() tween than animates from your desired starting value. (40px in your case)

 

See the Pen vabGpv by PointC (@PointC) on CodePen

More info in this thread:

Happy tweening.

 

[jjvera]

Hi Point! 

 

Thank you very much, this resolved the problem the only detail (correct me if is only me) i saw a flickr, like a repositioning of the div when you reverse the timeline one time and another? 

I-m going to read the topic and see what i can find

[PointC]

hmmm... I didn't see anything odd on reverse so I'm not sure about that. Maybe someone else sees something weird and will jump in with an idea.

 

Happy tweening.

 

[jjvera]

Think i fix it!

 

here is it:

 

See the Pen jpdVBb by JulianVera (@JulianVera) on CodePen

 

Is matter of timing

[PointC]

If you want to watch it in slow motion and watch for the weird flicker you can set a slow timeScale. 

var modalCloseSurveyTl = new TimelineMax({ paused: true }).timeScale(0.1);

 

You could also use GSDevTools to scrub the timeline and watch for anything odd.

 

Edit: looks like we posted at the same time. Glad to hear you fixed it.