Making a dropdown with Animation on mouse enter trigger

[olayinkapinmo]

I am making a dropdown menu with an animation that triggers on mouse enter. I have been able to design my animation that works well and also the drop-down menu. My only problem is attaching the animated drop-down menu to the nav bar. I want the drop-down to animate in on mouse enter and animate out on mouse leave.

[olayinkapinmo]

Hello there,
I am still stuck with my problem. Is there any one who can offer a solution to it?

[tank666]

See an example in this post: How to create submenu that appears "While Hovering" - #4 by tank666.

[olayinkapinmo]

Hello, I have solved this issue with the preferred topic. But I still have a problem. I want the Dropdown to have a particular animation when I use the mouse enter trigger.

[tank666]

I can’t help you without seeing the file. So, experiment and everything will work out for you.

[olayinkapinmo]

Here is the link to the file
https://www.figma.com/file/bMhyqkpH1KHKrW3ImdbSK8/Website-Recreation?type=design&node-id=0%3A1&mode=design&t=NbxbqVmXCG00Q80N-1

[tank666]

Here’s the structure of your variants:

I see the following here:

1. Layer names do not match.
2. Different number of layers.
3. The absence in the variants of those objects to which you want to apply certain smart animation settings.
4. In the interaction details in this component set, other smart animation settings are applied.

[olayinkapinmo]

I have renamed each frame to match each other. I also didn’t include the variant of the object that I want to apply a certain animation setting to because it isn’t responding to the nav bar. I am also experiencing a little issue with the animation, it only works well on ‘while hovering’ and I want the animation to set in as soon as I mouse enter the use case button on the Nav bar.

The image is the Animation I created for the drop-down menu.

Kindly check The #1 communication platform for the frontline workforce as a reference for what I am trying to achieve.

[tank666]

I still see different structure of variants.

And different animation.

Change the structure of the variants so that it is the same, adding all the missing objects. For example:

Variant 1
    Container
        Nav bar
        Dropdown 1 (height: 0)
        Dropdown 2 (height: 0)

Variant 2
    Container
        Nav bar
        Dropdown 1 (height: 100%)
        Dropdown 2 (height: 0)

Variant 3
    Container
        Nav bar
        Dropdown 1 (height: 0)
        Dropdown 2 (height: 100%)

Change the animation settings to what you want.