Height from 0 to Auto in interactions 2.0 not working

I always keep on switching back to interactions 1.0 for this and would like to know if there is a solution so I can stick to using the new interactions version.

Here is the thing:
I often animate roll outs by setting the content to 0 height and overview hidden.
Then upon click on the trigger the content height animates to auto.
I adjust the easing and the timing and it works great.
In IX2 it does nothing.
Is there a way to do this without having to set a fixed height to animate to?


4 Likes

I had the same issue.

It works differently in IX2 - you need to set the 0 only in the interaction - and not in the style panel. Then it should work.

I agree that the way you are doing it should work too but it doesn’t - it’s a bug in my opinion.

Let me know if that works for you.

2 Likes

Right, thanks. That kinda works but then when you close and open it again the whole animation is gone it just instantly moves to the auto size without any easing. Sure is a bug that makes me go back to IX1, I had hoped it was just me doing something wrong :frowning:

Thanks anyways for the help.

I am getting this same issue. I have an interaction that opens and closes a list. I have used something very similar millions of times before with no issue. Now when I start open and use the interaction to close (first click) and open again (second click ) works fine. However, with a list that starts closed and my first click opens the list nothing happens. It seems as though setting the height to “AUTO” nothing changes. If I set the height to AUTO in the edits the list is now displayed. I am lost as to why this isn’t working.

1 Like

I’m having the same exact issue. Has anyone found a way to get auto to work?

I ran into this issue as well when trying to follow the documentation here: Create a custom accordion | Webflow University I wasted an hour before switching to legacy interactions and having it work the first try :frowning:

1 Like

It works but slightly different then before. Set the size to auto. Then go into interactions and change the size to 0 and set it as the starting setting (don’t have we flow in front of me so am not sure how it is called, it is in the top of the panel where you set the duration and easing). When you have that you can create the resize to auto.

Benefit of this is that in the designer you still see the element sizes to auto so it is easier to work in.

2 Likes

This was painful for me to learn but now I feel like I really understand the interactions now. Thanks for your contribution, it really helped me with my project.

Thanks, this took me a painful while to discover this. The only issue here is that you may get a ‘flash’ of that element when the page loads.