I’m having an issue with hover animations and component states in Figma while building a website prototype.

Here’s my setup:

• I have a full website frame called “Desktop - 1”.
• Inside this frame, there is a transparent header/navbar placed over the hero image.
• The navbar contains:
  • logo
  • search icon
  • navigation items (“Destinos”, “Experiências”, “Sobre”)
  • burger menu
  • login icon
  • CTA button

Originally, I built the navbar separately as isolated components and the hover animations worked perfectly.

What I’m trying to achieve:

• When hovering “Destinos”, a green selector line appears underneath it.
• Same behavior for “Experiências” and “Sobre”.
• Smooth hover transition using Smart Animate.

My current structure:

• “Desktop - 1” → full page/frame with hero section and transparent navbar.
• Separate component called “Component 4” → isolated navbar version with the green selector line under “Destinos”.

The problem:
When I integrate everything into the full desktop frame, the hover animation starts flickering/glitching.
It looks like Figma is transitioning between:

• the full desktop frame
  and
• the isolated navbar component/frame.

So instead of animating only the selector line, the entire navbar/frame state seems to switch.

Questions:

1. Do I need to recreate the full desktop frame for every hover state?
2. Is there a better way to animate only the selector line without duplicating the entire page?
3. Should this be done using variants inside a single component set?
4. Is there a recommended structure for hover animations in navbars over hero images?

I also tried using “Use as Mask”, but it caused the entire navbar to become transparent instead of isolating the selector line animation.

I know this is silly but I'm a noob, and I'm looking forward to any help, if anyone would be down to a quick google meet, I'd be more than happy.