Here we show you how to set Webflow tabs to automatically cycle through each tab link in a set amount of time. This will not interfere with the ordinary ability of users to click on the tab links.
Auto-rotating tabs can be achieved in three simple steps.
1. Add the script into your Webflow site
Place this code before </body> tag
2. Create a new tabs component
There are two ways to add a tabs component:
a) You can go into the add elements panel, scroll down to components and drag in the tabs component
b) Press ctrl-e, type "tabs" and press enter (quicker way)
3. Give all of your Tab Links the class of “Standard Tab” and your Tabs Menu the class of “Tabs Menu”.
The code we inserted earlier will access the tab links and tabs menu through these class names. Although, you can change the name of the classes that the script will target.
Done. That’s it.
4. Now publish your site and view it live to see your auto-rotating tabs in action!
If you feel like going the extra mile, we recommend creating a load bar to give users a visual cue as to when the next tab change will occur. Don't worry, this is super easy.
1. Add a div block inside your tab link - this will contain your load bar.
You can set the classname, width, height and colour to whatever you want. Absolute positioning is the important thing here as it will allow the load bar that we create next to sit on top of this div block.
2. Add another div block inside the div you just made - this will be your load bar.
- Set the width to 0% (this will be animated to resize to 100% later)
- Set the height to 100% so that it will take up the full height of the loadbar wrapper that it sits inside of
- Choose a colour you like
3. When the tab is in view we want to animate the "load bar" size from 0% to 100% over 6 seconds.
- With your 'Standard Tab' link selected, go to interactions and add a new element trigger to occur on "tab change"
- Create a new timed animation when the tab is in view
- Select the load bar and add a new action to affect its size
- Set the width to 0% and duration to 0 seconds.
- With the load bar still selected - add another action to affect size. This time we will set the width to 100% and duration to 6 seconds.
4. Now we need to make the load bar reset to 0% when it is not the current tab.
We want to create another new animation when the tab is out of view. With the load bar selected, start a new animation and set its size to 0% width with 0 second delay.
All that's left to do now is admire your awesome new animation.