In the project i added a bottom navbar for ease of use while working, it has nothing to do with the Codepen element.
The first thing I tried was to copy the code and embed it in all the right places: CSS - header, JS - footer, HTML - embed code, which worked out well. You can see the test on the “Embedded code page”.
Second thing was to try and change the first 3 links in the nav so that they will link to three different pages (Page 1, Page 2, Page 3) - which didn’t work.
The third thing was to try and build it from scratch in the designer, but once i got to the CSS i started to get lost.
Can anyone please guide me on the steps i should be taking?
Maybe this isn’t the help you want but I did a quick test of a similar effect for fun here: http://forum-60215.webflow.io
The links has a fixed width and I moving the border div inside of a link wrapper with IX2 and percentages.
You also need to think about page transitions. For a user when a link to another page is clicked the new page is gonna load if you don’t stop it.
So one approach would be to use a script thats delays the page transition, make your animation and then the page transition happen. On the new page the link is marked as the user would expect.
Maybe some other have other tricks or tips for you =)
So just to help you or someone else out a bit, still not exactly what you are after but still some cool effects (maybe)
I made a collection and a nav that links between the items. When a link is pressed there’s a slight page transition delay(customs code) and a interaction is executed. When the new page loads a load interaction is set. http://forum-60215.webflow.io/test/one
I’ll think I leave this now, I can’t figure out how to do that inside Webflow. I’m sure it’s possible to add that code but I leave that to some one else.