How do you apply dropdown interactions?

Design help Animations & Interactions
1

I feel like I am missing something here because no matter what I do, I cannot get an interactions to work on my dropdown. I have tried applying it to the dropdown button and the list and triggered the list from the button and all I can get it to do is move instead of my desired scale action. When I do get it to work it affects the dropdown arrow too and it looks pretty awful. Can anyone tell me how this is supposed to work?

https://webflow.com/design/cad?preview=8db6b6b4a108aa7ec50b0d7e0a72ad74

2

Hi @DFink,

Sorry this is giving you trouble, it can be a little tricky.

Give these steps a try to animate your dropdown menu’s height:

  1. Apply the IX to the List element.
  2. Style the List element to Overflow: Hidden
  3. Set the IX Initial Appearance to Height: 0px
  4. Set the IX Open step to Height: auto
  5. In Dropdown Settings, set Close Delay to 500ms

With any luck, that should do it!
-Dan

3 Likes
3

Thanks Dan. That fixed it. Very confusing though. I think someone should do a tutorial on it.

4

[Video] How I added animation and easing to Webflow dropdowns

Oh, and don’t forget to set your close delay to match your interaction length in your Dropdown Settings. In this example it would be 500ms.

1 Like