Animating height smoothly

[Daniel Hult]

Hi!

I've made a quick codepen showing a problem with animating height/display property smoothly. As you see in the codepen, when you click "Open content" - some content below will "jump" to a new position because the hidden content will take up space when being displayed. Any idea how I can smoothly make this transition from hidden/visible with height so that the content below will not jump like that?

See the Pen OJLOWyx by daniel-hult (@daniel-hult) on CodePen.

[Shaun Gorneau]

Hi @Daniel Hult,

 

The reason for the jump is that you're setting the element's height to 100%, but it has no basis for that height in the cascade. Setting it to a pixel height will give it something to tween to. That could be a pixel value defined by you or calculated with Javascript by getting the element's current height. I've set it to 200px for demonstration.

 

I've also got some code in there (commented to explain) that sets the positions of everything as if the Timeline has already played (because it has!). Due to (my quick guess) a negative offset of the fromTo tween, you get different positions after the timeline has played through and reversed when compared to not having played yet.

 

See the Pen pozdPxL by sgorneau (@sgorneau) on CodePen.

 

Happy tweening!

[Daniel Hult]

Yeah, I can't set a fixed height to it though because it's content that comes from Wordpress on the real site. Any way around this?

[Shaun Gorneau]

Yes, grab the height on the fly using JavaScript.

[Daniel Hult]

But if I have it set to "height: 0px" in the css from the start - will that work? 

[Shaun Gorneau]

That won't make much of a difference. CSS height 100% doesn't mean anything on an element without an ancestor with a defined height. But, you can get the element's pixel height at any time and use that value.

 

One problem here is that CSS is setting the height to 0 ... so that's what it is. You can avoid setting the height in CSS and use GSAP to set the height to 0 in the timeline. That way we can capture its height before it becomes 0.

 

Have a look here (line 12 and line 15)

 

See the Pen pozdPxL?editors=1111 by sgorneau (@sgorneau) on CodePen.

 

 

[Daniel Hult]

Sorry for so many questions - but in your last codepen the height of the hidden content is still "visible" when you click the "close" button after it's opened ?

[Shaun Gorneau]

Hi, no worries about asking questions ... that’s what this forum is all about!

 

As for the height not tweening back to 0 ... I’m not seeing that here.

 

 

 

[ZachSaucier]

18 minutes ago, Shaun Gorneau said:

As for the height not tweening back to 0 ... I’m not seeing that here.

The behavior that I see is that it does tween back to a height of 0 upon clicking the "close content" button but then jumps back to its other height after the tween finishes.

[Daniel Hult]

Yeah, that's what I meant  

[Shaun Gorneau]

Ah, I’m on mobile and scrolling to see the behaviors ... that’s probably happening off-screen for me

I’ll be on a desktop in about 15 minutes and will have a look  

[Shaun Gorneau]

OK, I changed the logic of the when and where hiddenContent is set to 0 ... it's now part of a fromTo. Have a look,

 

See the Pen pozdPxL by sgorneau (@sgorneau) on CodePen.

[Daniel Hult]

That fixed it! Thank you so much!  

[Shaun Gorneau]

3 hours ago, Daniel Hult said:

That fixed it! Thank you so much!  

 

Awesome, glad it worked out! Good luck with the project!