How to "current state" on links works?

Design help Custom code
1

Hi, I’ve, by accident, just found out about the “current state” on links which directs you to an url or anchor/id on the Webflow project. Ive starting using it to trigger animations on scroll instead of interactions 2.0 as it’s even faster to set up interactions and you don’t end up with loads of interactions to clean up later. It feels as the site also runs much smoother than if I used interactions and i can animate much more css attributes then interactions offers. I love interactions 2.0, especially the visual timeline etc. But for some things, this is works even better.

I’m very curious about how it works. First i thought it was some new fancy css feature, as I found it in the Webflow designer class states menu (hehe yeah, stupid…), but It’s most likely JS triggering a class when the element with the linked ID shows up in the viewport.

Can anyone shine some light on this?

Best
Peter

2

That’s almost right. You can find the actual JS in the published output of your site, but it’s compressed and hard to read. Search w--current … it’s the same part of the code that does smooth scrolling between anchor links by default.

3

Thanks! It helped a little to understand the logic and I was able to write my own custom code to do it :slight_smile:

Best
Peter