Overview 👽
Automatically rotate through your Webflow tabs with a set amount of time. This is the perfect tool for creating an engaging content section or product demo. This will not interfere with the ordinary ability of users to click on the tab links.
To add this into your project, follow the simple steps and add the custom code into your project or page settings. First shared to the community by forum leader Irishbuckly
Instructions ✍️
Auto-rotating tabs can be achieved in three simple steps, we will add our Webflow tabs element, and we will use our script to communicate with specific class names.
1. Add the script into your Webflow site
The first and most important thing is to add the custom code into your project settings. Take some time to review the code and understand what you can, you'll see the class names which are most important here, our tab buttons and our tab menu. Place this code before </body> tag
2. Create a new tabs component
Navigate to your elements panel and add the webflow default tabs element.
3. Add the Required Classes
Target your Tab Button, and apply the class 'Tab Button' to it. Now do the same with the Tab Menu, you'll also give this a class of 'Tab Menu' you can see it referneced in the custom code that we added earlier. Althought we are using capitalized letters and spaces, the rendered code will read like it does in the script, for example, tab-menu.
Done. That’s it.
4. Now publish your site and view it live to see your auto-rotating tabs in action!
Remember that custom code requires a published site environment to run. Publish and test it for yourself.
Optional - Add a loader bar to your tabs!
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 color 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 color 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.
