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.
I am still stuck with my problem. Is there any one who can offer a solution to it?
See an example in this post: How to create submenu that appears "While Hovering" - #4 by tank666.
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.
I can’t help you without seeing the file. So, experiment and everything will work out for you.
Here’s the structure of your variants:
I see the following here:
- Layer names do not match.
- Different number of layers.
- The absence in the variants of those objects to which you want to apply certain smart animation settings.
- In the interaction details in this component set, other smart animation settings are applied.
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.
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.