Getting Started 🔄
Auto rotate your Webflow tabs and pause their rotation on hover.
Add interest to your page and communicate key features with an advanced tabs component. This Booster allows you to add auto rotation to your webflow tabs, with the optional ability to pause the rotation on hover and display a progress bar which can be interacted with through the pause.
This Booster can be added directly into your Webflow projects with our official Webflow App. You can install the official Boosters App. The Boosters app will add all the attributes and elements you need directly in your Webflow project.
Install Instructions ✍️
1. Add The Booster Script To Your Project.
Copy the script and paste it into the <head> section of your custom code settings.
<!-- 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 The Webflow Tabs Element
This Booster uses the native Webflow Tabs Element, so start by adding that to your project. If you already have a tabs element, you can just follow along and add these in the same way.
With the 'Tabs' element selected, assign the following attributes:
- Add the attribute Name:
fb-tabsand Value:true. - Add the attribute Name:
fb-tabs-speedand Value:5000. This sets the speed in ms for when tabs should change
Optional attributes for pauseable tabs and the progress bar:
- Add the attribute Name:
fb-tabs-pauseableand Value:true. This allows for the tab rotation to be paused when the user hovers over the tab element. - Add the attribute Name:
fb-tabs-progressand Value:true. This attribute is used if you want to add an interactable progress bar to your tab rotation.
3. Add The Progress Bar
An advanced feature of this booster is the interactive progress bar, which can be paused and interacted with. The progress bar should be added inside each of the Tab Links. To add a progress bar:
- Create the Base: Add a
▭ div-blockinside a Tab Link to serve as the base of the progress bar, in this example it's named "Tab Progress Bar Base." This should typically be 100% width with a fixed height (usually around 5px height) - Add the Progress Bar: Inside the "Tab Progress Bar Base," add another
▭ div-blocknamed "Tab Progress Bar." This should be styled with your brand color and will fill the base from 0% to 100% during the tab rotation. - Set Up the Transition: Apply a 0% width to your Tab Progress Bar, and add a transition property to the element to animate its width. By default, use
width: 125msfor a smooth transition.
4. Add This in a Single Click with Our Free App
For a quicker setup, use our free Boosters app to add this feature without following the manual steps. Download the app from the Webflow marketplace and start using it right away at no cost.
5. Publish & Test 🚀
Once you've followed the steps above and have added both the script and the attributes, you can publish your page. View your live staging domain to test 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! 🌟
Add this booster + more with the official webflow application.
Join our community and
claim free products
No Spam. Only sweet content and updates of our products.
Join 55,000+ other creators in our community
