This is a clonable Webflow project, for auto tab changing element, with an interactive animated indicator.
The element is the native Webflow tabs widget, and contains 3 tabs (this is tab 1). The auto-change part of this project is JavaScript generated based on the code based on Dorian's code from here.
You can add any number of tabs to this element by copy+paste one of the tab panes (the elements with the '.tab' classname) or one of the tab links (the elements with the '.tab-link' classname).
If you want to change the timing (currently 5 sec.), you will have to do so in 2 places:
1. Code section of this page which is where the JavaScript create a mouse click on the next tab:
Find where it is written 8000 and change it to whatever timing you'd like (in milliseconds)
2. Interaction, which created the line indicator for each tab:
- Chose any of the tab links, and click on the interaction panel
- Inside the "Current Tab Timer" animation change the duration for the 'current-line' size to the same timing you entered in step 1.