Jump to content
Search Community

Animating height percent

friendlygiraffe 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

I want to set the height of a div to 0%, then animate the height to 100% of it's original size.

 

This works with px, but since I don't know the exact height in px I'm using percent instead.

 

I could get the height using .clientHeight; and store it in a variable when initialising, but I wondered if there was an easier way.

 

Thanks

See the Pen GevgVm by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

4 minutes ago, PointC said:

Why do you need to set() it to 0? The .from() tween will take care of that for you because it will immediateRender.

 

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

 

 

Apologies if I haven't explained myself. So there will be several containers which need to remain hidden until an animation is triggered by a mouseclick

 

I could make every div a from timeline and set it to paused:true, I just wondered if there was a simpler way

 

Link to comment
Share on other sites

Or you can set the container to a height of 0 with overflow :hidden. Add an inner container record it's height and animate the outer container to match.

 

If heights were consistent it could be keyed to only one element.

 

See the Pen ywoOGB by Visual-Q (@Visual-Q) on CodePen

 

Example of iterating through multiple items with different heights:

 

See the Pen drzXyJ by Visual-Q (@Visual-Q) on CodePen

 

  • Like 2
Link to comment
Share on other sites

19 hours ago, Visual-Q said:

Or you can set the container to a height of 0 with overflow :hidden. Add an inner container record it's height and animate the outer container to match.

 

If heights were consistent it could be keyed to only one element.

 

See the Pen ywoOGB by Visual-Q (@Visual-Q) on CodePen

 

Example of iterating through multiple items with different heights:

 

See the Pen drzXyJ by Visual-Q (@Visual-Q) on CodePen

 

 

Thanks, but unfortunately the heights aren't consistent, they're expanded to the content within them. And yes, scaleY stretches the content within. Appreciate the reply

Link to comment
Share on other sites

1 hour ago, friendlygiraffe said:

 

Thanks, but unfortunately the heights aren't consistent, they're expanded to the content within them. And yes, scaleY stretches the content within. Appreciate the reply

 

See the last codepen in my second reply it iterates through images of different heights and uses height on parent instead of scale so it doesn't affect the children.

  • Like 2
Link to comment
Share on other sites

Leave it to Jack to show how it can all be done in GSAP. 

 

I'll add my own humble addition. If you're going to use his solution above and you want to hide the items initially until you're ready to call the animation:

 

add display:none; to .container css

 

and tl.set(".container",{display:'block'}) //or whatever your intended display 
           .fromTo...

 

or you could use visibility:hidden/'visible '

  • Like 2
Link to comment
Share on other sites

Thanks all, sorry for the delay. I've made another pen to demonstrate what I'm trying to achieve. It's like @GreenSock's pen, it stores the height in a variable on initialization.

 

But I was trying for a method without storing the height as a variable. I'm assuming that this is the only way now. Thanks again!

 

See the Pen xBpKWN by friendlygiraffe (@friendlygiraffe) on CodePen

Link to comment
Share on other sites

13 hours ago, friendlygiraffe said:

Thanks all, sorry for the delay. I've made another pen to demonstrate what I'm trying to achieve. It's like @GreenSock's pen, it stores the height in a variable on initialization.

 

But I was trying for a method without storing the height as a variable. I'm assuming that this is the only way now. Thanks again!

 

https://codepen.io/friendlygiraffe/pen/xBpKWN

 

 

Jack's solution can be plugged in to what you have, and seems to work just fine, without having to prerecord heights to an array.

 

See the Pen vPdqRy?editors=1010 by Visual-Q (@Visual-Q) on CodePen

 

  • Like 2
  • Thanks 1
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...