Making a dropdown with Animation on mouse enter trigger

Ask the community
1

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.

Screenshot 2023-10-23 131427
Screenshot 2023-10-23 131427772×757 34.4 KB

Screenshot 2023-10-23 131517
Screenshot 2023-10-23 1315171041×795 33.9 KB

2

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

3

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

4

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.

5

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

6

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

7

Here’s the structure of your variants:

structure
structure334×544 18.4 KB

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.
8

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.

image
image550×853 47.6 KB

9

I still see different structure of variants.
modified-structure

And different animation.

interaction
interaction784×286 20.1 KB

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.

10

I am facing same kind of issue