Streaming live at 10am (PST)

Moving from circle to circle: Extra text

When shifting from circle to circle, extra unwanted text displays through “Get Started and Contact Us”.

When moving from the center logo, to a circle text displays normally.

Any thoughts on fixing this interaction?

Screenshots and project read-only link attached. Thank you!


Here is my public share link: https://preview.webflow.com/preview/your-agora?utm_medium=preview_link&utm_source=designer&utm_content=your-agora&preview=c9e9bcf66ed18109a7d644fb0dc6b462&mode=preview

This is because the interaction triggers are interfering with each other. If you hover slowly across them, it works - only when moving the mouse fast it “glitches”.

One thing I found, which causes issues is that on each interaction, you set the default text as initial state. The text is already set to block via the styling. If you can stay away from the “set as initial state” and just have the element be styled the same on page load.
I did that, but the issue was not fixed.

You could work around the “glitching” by positioning all the texts absolutely on top of each other, with the default text at the very bottom (z-index) and give them all the bg color so only one can be seen, regardless of the “glitching”