I am trying to create the same behavior for my navbar as seen on the Bain (https://www.bain.com/) website. How it goes from transparent, then when you hover over one of the elements, it becomes opaque with a white background, but it also has a scroll animation in that it moves from transparent to opaque on scroll.
I have the scroll animation down, but I can’t seem to get it to not return to transparent once it’s been scrolled down to the opaque background. I’m attaching the read-only link here:
Here’s how to create a navbar that responds to scroll and changes opacity:
Select your navbar element and set its position to “Fixed” in the Style panel
Open the Interactions panel
Click “Create Scroll Animation”
For the “When Scrolled Down” state:
Set the initial opacity to 100%
Add a transition for opacity to your desired percentage
Adjust the timing and easing as needed
For the “When Scrolled Up” state:
Set the opacity back to 100%
Adjust transition timing to ensure smooth animation
For hover effects, you can add an additional interaction by selecting the navbar and creating a hover state in the Interactions panel. Then adjust the opacity and other properties for the hover state as desired.
To fine-tune the scroll behavior, use the scroll settings in the Interactions panel to adjust when the animation triggers and how quickly it responds to scroll position.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
The read-only link does not seem to work. That being said, your live site navigation seems to work exactly as the reference site that you shared when it comes to scroll animation. i.e. The menu has white background when the user scrolls down and it returns to its transparent state when its on the top. The hover animation however is not setup on your site like how it works on the Bain & Co site.
Based on the site, the hover state is not changing the bg color to white but instead it is set to transparent.
If you have set it to white and if it still does not work on hover, can you share the read only link to troubleshoot this?