Learn how to create auto-playing tabs in Webflow with a visual timer indicator. This 2026 guide includes the custom JavaScript you need to rotate tabs automatically.
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// Fix for Safari
if (navigator.userAgent.includes("Safari")) {
document.querySelectorAll(".tab-button").forEach((t)=>(t.focus=function(){const x=window.scrollX,y=window.scrollY;const f=()=>{setTimeout(()=>window.scrollTo(x,y),1);t.removeEventListener("focus",f)};t.addEventListener("focus",f);HTMLElement.prototype.focus.apply(this,arguments)}));
}
// Start Tabs
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
// Connect your class names to elements.
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();
if($next.length) {
$next.click(); // user click resets timeout
} else {
$('.tab-button:first').click();
}
}, 5000); // 5 Second Rotation
}
// Reset Loops
$('.tab-button').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>
Webflow’s native tabs component is great for organizing content, but it lacks one crucial feature: automatic rotation.
In professional web design, especially for hero sections or feature highlights, auto-playing tabs are a high-value interaction that keeps users engaged without them having to click.
In this tutorial, I’ll show you how to build a tab system that automatically switches every 5 seconds and includes a visual "loading line" so your users know exactly when the next slide is coming.
First, we need to build the visual "timer" line inside each tab.
tab-indicator-wrapper (Width: 100%, Height: 3px, Background: Gray).tab-line (Width: 0%, Height: 100%, Background: Red). [01:25]We want the tab-line to grow from 0% to 100% over the duration of your choice (e.g., 5 seconds).
tab-line to a size of 0% width (initial state) and then animate it to 100% width over 5 seconds. [02:37]tab-line width to 0% so it's ready for the next time it comes into view. [05:51]To make the tabs actually switch automatically, we need a small snippet of JavaScript. You can place this in your Page Settings > Before tag.
The code essentially looks for your tab buttons and tells Webflow to click the next one every 5000ms (5 seconds).
Crucial Step: Make sure your classes match the code:
tab-buttontabs-menu [05:04]If you want to follow along and see exactly how I set up the interactions and the code logic, watch the full breakdown below:
I’ve used this exact method for high-ticket clients (like those in hospitality and real estate) to showcase:
If you're just starting out, I highly recommend checking out my free tutorials on the Webflow Box Model and CSS Classes first.
Ready to skip the trial and error? Check out my [Paid Webflow Course] where I share the exact business and dev strategies I use to run my Sydney-based agency.
{
"@context": "https://schema.org",
"@type": "HowTo",
"name": "How to Auto-Play Tabs in Webflow (2026 Tutorial + Custom Code)",
"description": "Learn how to build auto-playing tabs in Webflow with a visual timer indicator and custom JavaScript. A complete step-by-step guide for Webflow developers.",
"image": "https://img.youtube.com/vi/vpqHVU9BwhE/maxresdefault.jpg",
"totalTime": "PT7M",
"author": {
"@type": "Person",
"name": "Derek Siu"
},
"publisher": {
"@type": "Organization",
"name": "Derek Siu | Webflow & Web Design",
"logo": {
"@type": "ImageObject",
"url": "https://www.dereksiu.com.au/images/logo.png"
}
},
"video": {
"@type": "VideoObject",
"name": "How to Auto-Play Tabs in Webflow",
"description": "Step-by-step tutorial on creating auto-rotating tabs with a timer bar in Webflow.",
"thumbnailUrl": "https://img.youtube.com/vi/vpqHVU9BwhE/maxresdefault.jpg",
"contentUrl": "https://www.youtube.com/watch?v=vpqHVU9BwhE",
"embedUrl": "https://www.youtube.com/embed/vpqHVU9BwhE",
"uploadDate": "2026-03-12",
"duration": "PT7M8S"
},
"step": [
{
"@type": "HowToStep",
"name": "Set up Tab Link and Indicator",
"text": "Set your Tab Link position to Relative. Add a 'tab-indicator-wrapper' div (100% width, 3px height) and a child 'tab-line' div with 0% initial width.",
"url": "https://www.dereksiu.com.au/tutorials/webflow-auto-play-tabs#step1"
},
{
"@type": "HowToStep",
"name": "Configure Tab Change Interactions",
"text": "Create a 'Tab Change' trigger. In 'Tab in View', animate the tab-line width from 0% to 100% over 5 seconds. In 'Tab out of View', immediately reset it to 0%.",
"url": "https://www.dereksiu.com.au/tutorials/webflow-auto-play-tabs#step2"
},
{
"@type": "HowToStep",
"name": "Add Auto-Rotation Custom Code",
"text": "Paste the JavaScript snippet into your Page Settings (Before </body>). Ensure your classes are named 'tab-button' and 'tabs-menu' to match the code logic.",
"url": "https://www.dereksiu.com.au/tutorials/webflow-auto-play-tabs#step3"
}
]
}
