Streaming live at 10am (PST)

Smoothly collapse height of a DIV with an interaction


#1

I want to smoothly reduce the height of a container to 0. It works if the initial height is an absolute pixel value. However, I cannot make the container an absolute value becaus it will have text content, so considering different screen sizes, the height the content will take up is unknown.

I've set up a quick test here: http://test8593.webflow.io/

It just jumps from visible to invisible the first time. It seems to then work most of the time after clicking the Show button. But I really need to get a nice sliding transition to work initially. What do I need to do to fix it?

Many thanks!

https://preview.webflow.com/preview/test8593?preview=e6969026f2a6ee7b6c9f60b556b6b5d1


#2

When an element dimension is set to auto, HTML doesn't know its value. That's why the first jump. The browser will figure it out after that. That's why JS is so often needed for motion, because JS only can calculate and return the dimensions of anything at any given time.

The only fix within Webflow would be to change your layout so you can give a fixed height to your shrinking element. I know that's not the answer you're looking for...


#3

You're amazing – i.e. the amount of answers you give in this forum. Vive la France!

Meanwhile I've thought of a work-around: I've applied an Load trigger interaction to the container, made its initial appearance 0 height, and then transition to auto with 0 transition time. Now it collapses smootly :slight_smile:

http://test8593.webflow.io


#4

Hi there! I fixed it by adding a new Interaction for 'Panel' and set the Height to Auto in the Initial Appearance

Regards! Kai


#5

Thanks for looking – even better!


#6

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.