Jump to content
Search Community

Animating height smoothly

Daniel Hult test
Moderator Tag

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

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

Link to comment
Share on other sites

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!

  • Like 2
Link to comment
Share on other sites

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

 

 

  • Like 2
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.
×
×
  • Create New...