Mouse Hover Animations on Nav Links

how do we achieve a mouse hover animation effect in wappler.

what we are looking to build is the bottom nav bar move hover effect on

like this:
(left is when mouse is hovering, right is static)

how can we achieve this in wappler?

please help.

I am not sure if this is the correct Wappler answer, but it does get you the result that you want.

Choose the Styles panel and click the plus sign. Choose the relevant style sheet and the style sheet will show in a separate tab.

Choose that tab and add the style rules for the hover effect similar to



thank you @ben
was looking for a more visual solution than something that requires us to code manually.
i guess wappler isn’t there yet - but hopefully, it will be.

@nshkrsh yes animations will also be added as visual tools in the UI.
For now you can use Ben’s solution - it’s easy to implement.

1 Like

yes, indeed not much diffcult.
great to have confirmation from team on this :smile:

1 Like

Just as a side note: there is no hover effect on touch screen devices which comprises about 50% of all devices