Animation on hover for menu dropdown

Plasmic Studio Questions
1

Hi,

I’m making a navigation bar. Visibility condition is set to the dropdown container, which will be visible when I hover over to a menu element. It works fine but the dropdown reveals instantly. Is there any way to animate the dropdown, like fade in or add any other transformation when I hover over the menu element?

2

Here’s one way you might do this

  1. Turn the menu container into a component
  2. Create a variant called hidden. Select the root element and set opacity to zero and the transform to scale y to 0.
  3. Set a transition that animates all properties.
  4. Make your hover or click interaction toggle that variant rather than toggle the visibility. Remove the previous visibility settings.
    Let me know if that works!
3

That works, thanks for the help!

4

I made the transition with the opacity setting. It looks fine. But how can I make a fade out effect? I set a mouse leave interaction which is toggle the variant back to the default state. But that shows it instantly. Is there any way to fix that too @yang?

5

Did you set the transition?

6

I forgot if this is needed, but you may additionally need to explicitly set opacity 1 in the base variant

7

The transition itself works now, but the content looks bad at fade out. I made a video about it. The default variant’s contents will show up on fade out. Those contents are within the dropdown container which opacity was set to zero in the default variant. The contents are visible. If I set the content’s opacity to zero as well or hide them in the default one, the transition is not working anymore. @yang

8

One more thing I noticed. On the published page I can see the mouse pointer changes when I’m just navigating on the website. Probably because the dropdown element is not hidden, just an opacity set to zero so the mouse reflects to the dropdown menu elements inside.

9

Please ignore my previous comments.

The first half of the problem is solved. I made a showmenu variant, and conditional visibility is set for each content. Now it looks perfect when the mouse leaves, no jumping contents anymore.

My only problem is that the pointer changes/links shown when I hover over the mouse where the hidden menu is. I solved a part of it with an empty container which is the default item, so there is no problem when I first load the page and navigating. But when I hover over a menu element and then the mouse leaves and the dropdown fades out, the pointer can interact the latest dropdown elements.

If I set a second mouse leave interaction to the dropdown to set the current menu items back to the empty container (what solves this hovering issue) the fade out animation stops working. Probably because that is a visibility setting.

I made a video about it. @yang

10

The issue is already fixed with embed css. Pointer-events are set to none when the menu is not visible.

11

Nice @fiscal_mastodon!