Animate dropdown open

[chloecan]

Hi,

Is there any way to animate the open menu on a dropdown item?

I feel like it is a bit abrupt the way that it opens.

My test is here: http://breadcrumb-cca.webflow.io/header-menu

Sharelink: https://preview.webflow.com/preview/breadcrumb-cca?preview=726612009dae253a1d80d77fd3a7fb3f

[garymichael1313 (G.J.)]

Hey @chloecan, Yeah the dropdown element has changed a bit and I couldn’t get it to work the way I wanted. Like others, I just recreated it from scratch to get the effect I needed. Maybe someone has solved the dropdown riddle? You can see my collection at the bottom, there’s a dropdown and accordion menus. You can do it to!

https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c

[chloecan]

Hi @garymichael1313 thanks for sharing.

I’d prefer using the dropdown component really but if there’s no choice… I can’t believe this isn’t possible with the dropdown component…

[magicmark (Mark Willis)]

Having seen your post, I’ve just done this as it took me ages to find out how to do it…

Here is how to animate a dropdown menu with IX2

Loads of people seem to be asking (including me) how to animate a dropdown menu properly, and even better with IX2. With a few different posts I’ve found how to do it so thought I’d put it in a single one here. It’s a little bit fiddly, but I’ve done a video below which shows you how to do it. Don’t forget to select the actual dropdown wrapper so you can choose dropdown and NOT dropdown toggle on the interaction panel. Make sure you choose overflow: hidden on the dropdown list (so when t…

[garymichael1313 (G.J.)]

Yes for sure, use @magicmark example dropdown! Much easier. Thanks for helping us all out bud! See ya.

[chloecan]

Thanks guys will look into this!

I appreciate the help

[Macker (Chris MacDonald)]

Hi @garymichael1313 ,

I’ve been staring at the bright pink button reveal in your link for ages and cannot for the life of me work out how it works! There doesn’t appear to be any form of action/animation/transition on mouse hover?

Am I going mad?

Kind regards,

Chris

[garymichael1313 (G.J.)]

You mean the 1st membership button?

[Macker (Chris MacDonald)]

Yes, that’s the one.

[garymichael1313 (G.J.)]

Oh it’s an IX1 Legacy interaction. You can find the “button reveal” layer in the navigator. First go to interactions, then click Legacy. After, click button reveal to show the interaction.

https://preview.webflow.com/preview/gj-project-backup?preview=fe3759b3f1b4ca487673f8b2881e046c

[Macker (Chris MacDonald)]

Ah I see, so would it be advisable to do this a different way these days? Presumably mobile users can’t really use/see these kinds of interactions?

[garymichael1313 (G.J.)]

Uh… yeah I hear ya… you know I’m not sure what is best to try because there are literally dozens and dozens of phones. Not like it used to be, but there are still a lot of phone types, maybe not many brands anymore, but the S5, 6, 7, you know what I mean. And each little 4, 5, 6 for each person will have their own customized options, and man it can get all over the place!

I’m in the school of limitation on smaller devices. On a small tablet, like Kindel and small phone, just let people find content without interactions as much as possible.

The ultimately goal is not too Wow them, when their on the go or from mobile. The real goal is to make them - Pull out a credit card and buy something!! However that happens, then yes, an interaction might work for ya. When I’m on mobile I can’t stand movement because I’m scrolling a lot and reading. I just like to click, read, scroll, click, read, button, click pay, read, done.

If your actions cause a break in this flow, you might interrupt the impulse. Now they’re thinking, and you will take a back seat to whatever stopped them from pushing that little “green buy button”.