Header Section

The Tabs Section Is Right Below

Tab Changer

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).

Changing timing

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.

Enjoy ⛄

If you liked the clonable, Id appreciate some love:
Here, here, here and here... 😘


Created with ❤️ by Aviv