[Resolved] Trouble with interaction on dropdown list animation

I am attempting to do something that seems like it should be very, very simple. I have a dropdown list and I would like the buttons to slide in instead of just popping into existence.

I’ve got the button created with an interaction that triggers on dropdown. When I preview the animation, it works perfectly. When I put it live and click… the button just pops into existence and does not animate at all.

I’ve tried searching everything I can think of but I can’t find anything on this issue.

Please help before my heart explodes inside my chest.

1 Like

I’m going to update this myself, since I’m sure this is something another newbie may come across.

The problem was actually several things. One being that you need to change the display setting of the dropdown list to NOT go to “None” when the toggle is second-clicked, because what is happening is that everything inside the dropdown list (your animated button) goes invisible right along with it. The way to do that is to go into the dropdown settings, click “Open menu,” then select your dropdown list and set its display setting to “Block.”

One kind of strange twist to this is that before I did that, NEITHER animation worked in Chrome, and only the initial animation worked in Safari. The second-click animation didn’t work in either browser.

For anyone who is wondering, my heart did not explode inside my chest, but it got close.

1 Like

Are you still experiencing any problems with your interactions or were they resolved? :grinning:

There are still some issues. Mainly the fact that the animation doesn’t always work correctly. It seems to be pretty random, but in Chrome if you click the drop-down 10 times in a row, it will function correctly maybe 4/10 times.

I realize not many people will click the button 10 times in a row, so at this point I just need to hope that my Chrome visitors choose an option on the first click (and that the animation works correctly that time).

On the item you have the animation on make sure you have the affect what elements with hover not on ALL. It seems this causes many problems for me with interactions not working properly. Hope this helps. :wink:

This seems like irregular activity, can you please provide us with a Read only link as to help us diagnose either a bug in Webflow or if it is a user mistake. Thanks! :wink:

I’m certain it is user error, because I’m seeing similar ideas on other webflow sites which work flawlessly.

This is a page that is very much just for myself to practice interactions, etc.

https://preview.webflow.com/preview/divine-vision-studios?preview=389f5ad5759c48a07d54de74cd9dcdbf

It still isn’t working like it should, and now there are even more strange things happening.

The dropdown buttons animate in on dropdown as they should, but for the life of me I can’t get them to animate back correctly. On second click, the buttons all snap back.

I’ve got the dropdown box waiting for 1000ms before going back offscreen, so that shouldn’t be the issue (unless it isn’t executing the wait command for some reason) so the only thing left is that the button animations are ignoring the timing.

I wish I could say why it’s working now. I just started changing wait times, processing times, and positions… and now it’s working.

If anyone can shed some light on the situation, that would be fantastic. Otherwise, I’ll just let this thread die.

I’m happy you have resolved the problem. :wink::grinning::blush::+1:

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