Enabling a basic colour change interaction when scrolling

Design help Animations & Interactions
1

Hey guys
I just need a simple interaction for the following page.

So, all I want is so that, when each section scrolls into view, the relevant nav link on the left changes to #ff660b (orange)
Then, when the user scrolls down to the next section of the page, the next link turns the same orange and the link before goes back to blue.

So, simply put, the nav link of whichever section is currently in view will be orange.

Does anyone know how to do this? :slight_smile:
Thank you for your help
Bradley

P.S. On the webflow designer, this page is called “backpacking sri lanka”

Here is my public share link: https://preview.webflow.com/preview/dream-big-travel-far?utm_source=dream-big-travel-far&preview=ae94492a4e1e5739839b451433453663
(how to access public share link)

2

You need to style the “current” state of the link itself. To get to the “current”, first give your link a class, then point it to this page you are at. Then select it and it will say “current” next to the class name. Style it (make it orange). Now you can point the link to the page section and give this class to the rest of the links. A bit complex but this is how it is.

2 Likes
3

Perfect thank you so much for this! :smiley:
It now works exactly as I wanted it to

1 Like