How to Add Auto Rotating Tabs in Webflow

Automatically rotate the Webflow tabs component every x seconds. Includes optional tab pause and progress bar features

June 17, 2025

Peter B

Product & Development

Automatically rotate through Webflow tabs

Automatically rotate through your Webflow tabs at set intervals, perfect for creating dynamic content sections or product demos. This feature won’t interfere with users' ability to manually click the tab links. You can also pause the rotation on hover, with a progress bar that pauses as well during interaction.

Easily add this feature to your Webflow project using our Official Boosters App. The app will install all the necessary attributes and elements directly into your project, making setup a breeze!

Instructions ✍️

1. Add the Booster Script To Your Project.

Copy the script and paste it into the <head> section of your custom code settings. If you prefer a quicker setup, you can use our Webflow Boosters App to install the script and add a demo component to your project instantly.

<!-- Flowbase Booster [Tab Rotation] -->
<script src="https://cdn.jsdelivr.net/npm/@flowbase-co/boosters-tab-rotation-webflow@1.2.0/dist/tab-rotation.min.js" type="text/javascript"></script>

2. Add attributes to the tabs element

This Booster works with the native Webflow Tabs element, so start by adding that to your project. If you already have a Tabs element, simply follow along and apply these steps to it. With the Tabs element selected, assign the following attributes:

Name: fb-tabs Value: true
Name: fb-tabs-speed Value: 5000
Name: fb-tabs-pauseable Value: true
Name: fb-tabs-progress Value: true

The first two attributes are required, however you can choose true or false to the tabs element being pauseable and having a progress bar. The cool thing about the progress bar, is that it also pauses on hover (which can't be achieved with interactions).

3. Add The Progress Bar

One of the advanced features of this booster is the interactive progress bar, which can be paused and controlled. You'll need to add the progress bar elements inside each Tab Link. Here's how to set it up:

Create the Base: Inside a Tab Link, add a div-block that will act as the base of the progress bar. Name it "Tab Progress Bar Base." This div should usually be full width with a fixed height.
Add the Progress Bar: Within the "Tab Progress Bar Base," add another div block and name it "Tab Progress Bar." Style it with your brand colors. This bar will fill from 0% to 100% as the tabs rotate.
Set Up the Transition: This part is important, apply a transition property to the "Tab Progress Bar" to animate its width. For a smooth effect, set the transition to width: 125ms.

4. Publish & Test 🚀

Once you've completed the steps above, including adding both the script and the necessary attributes, it's time to publish your page. Head over to your live staging domain to see the Booster in action.