Overview 👽
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-tabsValue:true - Name:
fb-tabs-speedValue:5000 - Name:
fb-tabs-pauseableValue:true - Name:
fb-tabs-progressValue: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-blockthat 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.
Did you find this helpful? 💕
Your support means the world to us! In just 10 seconds, you can make a big difference:
- Leave a like on our Free Webflow Booster App.
- Share what you built with us on Twitter! We re-post to thousands!
Thank you for being awesome! 🌟
