Variable Height Text box reveals can't smoothly animate

Brief summary
I’d like a text box (will have customer testimonials from CMS in it in future) to start with a fixed size container showing i.e 3 or so lines of the review, fading out to indicate there is more. then a user clicks on the drop down button and the container grows to fit the text content.
I can do this, badly, where the box will grow smoothly to a fixed size (em/px/rem etc) but if i set it to be 100% it doesnt animate well (jumps to the full size with no delay.)
Please see the page i created in my Read-only link for more info!

Thanks for any help - i suspect this is me being a total novice in CSS and size-inheritance hierarchy knowledge!


Here is my public share link:

[2]: Share a read-only link | Webflow University

Hey @BeamStudio!

First welcome to the community!

So what I did to get the silky smooth transition back varying length text was first remove the height set on the “text container” as you establish the initial height in the animation.

(Text Container)

Next I changed 100% height to just auto in the animation.

(New Timed Animation)

After testing it out I found that there was a small bug using this method as auto uses px instead of and so on the second click it was using the number for pixels as em which was about 680 em and trying to go back down to 6 em. This resulted in on the second click to it getting overly big and then smashing down.

To resolve this I found using pixels (roughly 100px = 6 em) in the remaining spots of where em was used in the animation solved this as shown below.

(New Timed Animation)

(New Timed Animation 2)

I believe this is what you were trying to achieve let me know if you need more help.



Hello and thanks @DasSean for your prompt and effective solution to the animation issues. Really appreciate it.

1 Like