Skip to main content
Solved

Making a dropdown with Animation on mouse enter trigger

  • October 23, 2023
  • 9 replies
  • 1273 views

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.


Best answer by tank666

I still see different structure of variants.
modified-structure

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.

View original
This topic has been closed for replies.

9 replies

olayinkapinmo

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


tank666
  • 4873 replies
  • October 24, 2023

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
  • 4873 replies
  • October 31, 2023

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


olayinkapinmo

tank666
  • 4873 replies
  • October 31, 2023

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
  • 4873 replies
  • Answer
  • November 1, 2023

I still see different structure of variants.
modified-structure

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.


benoluxury

I am facing same kind of issue


Cookie policy

We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.

 
Cookie settings