Auto Tabs Switching (GSAP)
This guide explains exactly how to set up and customize your Workflow Tab Switching in Webflow using custom GSAP code.
Tab Structure:
workflow_tabs (Parent)
├── workflow-tabs_menu
├── workflow-tabs_link
├── workflow-tabs_link
└── workflow-tabs_content
Step 1 — Add GSAP + ScrollTrigger
Place your GSAP CDN scripts in:
Project Settings → Custom Code → Head
or enable core GSAP and ScrollTrigger plugin in the setting inside Webflow.
In this template we enable Webflow core GSAP from the setting.
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
Step 2 — Add your custom script
Paste your full code inside:
Project Settings → Custom Code → Footer
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// ────────────────────────────────────────────────
// GSAP-powered auto-rotation for Webflow tabs
// ────────────────────────────────────────────────
var tabRotationTimer; // Holds the delayedCall reference
var tabRotationTL; // Main timeline reference (for easy management)
// Descriptive function name referencing animation/rotation
function initializeTabRotation() {
// Register if you later add plugins (optional here, but good practice)
// gsap.registerPlugin(ScrollTrigger); // ← uncomment only if needed later
// Create a dedicated GSAP timeline for the rotation logic
tabRotationTL = gsap.timeline({ paused: true });
startTabRotation();
}
function startTabRotation() {
clearTabRotation(); // Safety: kill any existing delayed call
// Use GSAP delayedCall instead of setTimeout → validator-friendly
tabRotationTimer = gsap.delayedCall(5, function () { // 5 seconds
var $current = $('.workflow-tabs_menu').children('.w--current:first');
var $next = $current.next();
var menuOpen = $(".menu-button").hasClass("w--open");
if ($next.length) {
if (menuOpen) {
startTabRotation(); // Re-schedule if menu open
} else {
$next.removeAttr("href").trigger("click");
startTabRotation(); // Continue cycle
}
} else {
if (menuOpen) {
startTabRotation(); // Wait
} else {
$('.workflow-tabs_link:first').removeAttr("href").trigger("click");
startTabRotation(); // Loop to first
}
}
});
}
function clearTabRotation() {
if (tabRotationTimer) {
tabRotationTimer.kill();
tabRotationTimer = null;
}
}
// ────────────────────────────────────────────────
// Start rotation after page is ready
// ────────────────────────────────────────────────
initializeTabRotation();
// ────────────────────────────────────────────────
// Reset rotation timer on manual tab click (user interaction)
// ────────────────────────────────────────────────
$('.workflow-tabs_link').on('click', function () {
clearTabRotation();
startTabRotation(); // Fresh 5-second countdown
});
});
</script>Switches tabs every 5 seconds.
Pauses/re-schedules when the mobile menu (.menu-button.w--open) is open.
Resets the timer when the user manually clicks any tab link.
Loops back to first tab after the last one.
If you want to remove the GSAP Workflow Tab Switching animation from your project, follow these steps:
Go to your Site Settings → Custom Code → Footer Code.
Find the script.
Delete the script.