Anchor link (selection & color change) interactions-help!

Design help Animations & Interactions
1

Hi,

I have a anchor-link navigation in fixed-position on right-side.

When you scroll to a particular section, I want the relevant anchor-link button to change color.

image
image1461×425 45.3 KB

I am getting very confused with interactions. I don’t know if I should use Element trigger (scroll into view) or Page trigger (page scrolled) or something else?

Should I choose Affect: selected element or class?

I tried many times, it doesn’t seem to work.
Please help!

Share-link is below. Please go to “Test Page” (at bottom of static page list).
Thank you.

Here is my public share link: https://preview.webflow.com/preview/online-lubricants?utm_source=online-lubricants&preview=6dca0a97f74a0f3c3b895cc5482f05b5
(how to access public share link)

3

Hi @RohanGanachari,

You are almost there :slight_smile:
All you need to add, is a current state to your anchor link with the red background and white font color.

46
46482×1462 58.1 KB

4

@avivtech I tried doing that, but its not working.

When I scroll up to the 1st section, both anchor links change color.

image
image1407×483 46 KB

When I scroll to the 2nd section, none of them change color.

I’m surely missing something here. But I don’t know what!?

image
image1565×693 62.2 KB

5

That is only because you still have interactions on them. You don’t need any interactions to create this behaviour.
Once you remove the “scroll into view” interactions from the div wrapping the text, all will work great :slight_smile:

6

:hushed: I didn’t know interactions wasn’t required here.

I feel so stupid now! :joy: