I’m looking to create a hover animation on my navbar. I want the hovered link to stay 100% opacity and the remaining links to then turn 50% opacity. Please can someone help me with the best solution for this matter?
This is quite simple to accomplish using Webflow interactions. I made a quick demo on my sandbox site and recorded a video.
The important bits:
-Make sure your nav items have the same class
-Create a Mouse Hover interaction that is triggered off of the class instead of the element. This is really important as is it ensures you only make one set of on/off interactions but all nav items trigger the effect.
-Create your hover on opacity interaction, and change the affect option to class, then in the dropdown choose Only siblings with this class. That is relatively self explanatory, but for the sake of anyone who might not know; that means that it will only affect elements with the same class and the same parent element, but will not affect the interaction trigger.
-For the hover out part of the interaction, you can just duplicate the first one, rename it, and return the opacity to 100%