Return to articles
Add auto rotating tabs in Webflow
Tutorials

Add auto rotating tabs in Webflow

With a small bit of custom code, the webflow tab component can have super powers. Auto rotating tabs can be an incredibly effective way to display information in a more engaging and interative way. Check out some of the examples below

Flowbase
May 6, 2021
Example of the finished product


Hi guys, in this tutorial I am going to show you how to set Webflow tabs to automatically cycle through each tab link in a set amount of time. This will not interfere with the ordinary ability of users to click on the tab links. 

Auto-rotating tabs can be achieved in three simple steps.

Step 1. Add the script into your Webflow site

Place this code inside the <head> tag

All this code does is tells the browser to block out any accidental highlighting of the tab buttons for added polish as shown in the demonstration below.

<!-- No Highlight www.flowbase.co -->
<style>                                  
.standard-tab {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome and Opera */                                  
</style> 


Place this code before </body> tag

This is the important piece of code. You can change the timing to whatever you want. It is currently set to 6 seconds per tab by default.

<!-- Auto Rotate Tabs (Original code from @irishbuckley www.flowbase.co -->
<script>
    var Webflow = Webflow || [];
    Webflow.push(function () {
      // DOMready has fired
      // May now use jQuery and Webflow api
// start everything
      var tabTimeout;
      clearTimeout(tabTimeout);
      tabLoop();
    // Cycle through all tabs. Match class names
    function tabLoop() {
        tabTimeout = setTimeout(function() {
            var $next = $('.tabs-menu').children('.w--current:first').next();
            if($next.length) {
                $next.click();  // user click resets timeout
            } else {
                $('.standard-tab:first').click();
            }
        }, 6000);  // 6 second tab loop (change this)
    }
    // Reset loop if a tab is clicked
    $('.standard-tab').click(function() {
        clearTimeout(tabTimeout);
        tabLoop();
        });
    });
</script>
Adding script to the pages header and body



Step 2. Create a new tabs component

There are two ways to add a tabs component, you can go into the add elements panel, scroll down to components and drag in the tabs component. Or the quicker way is to just press ctrl-e, type "tabs" and press enter. 

Creating new tabs component


Step 3. Give all of your Tab Links the class of “Standard Tab” and your Tabs Menu the class of “Tabs Menu”.

The code we inserted earlier will access the tab links and tabs menu through these class names. Although, you can change the name of the classes that the script will target.

Giving Tab Links a class name of "Standard Tab"
Giving Tabs Menu a class name of "Tabs Menu"

Done. That’s it. 

Now publish your site and view it live to see your auto-rotating tabs in action!


Bonus step!

if you feel like going the extra mile, we recommend creating a load bar to give users a visual cue as to when the next tab change will occur. Dont worry, this is super easy. 

Step 1. Add a div block inside your tab link - this will contain your load bar. 

You can set the classname, width, height and colour to whatever you want. Absolute positioning is the important thing here as it will allow the load bar that we create next to sit on top of this div block. 

Creating "Load Bar Base" class

Step 2. Add another div block inside the div you just made - this will be your load bar.

It should look like this
  • Set the width to 0% (this will be animated to resize to 100% later)
  • The height to 100% so that it will take up the full height of the loadbar wrapper that it sits inside of. 
  • Choose a colour you like.


Step 3. When the tab is in view we want to animate the "load bar" size from 0% to 100% over 6 seconds. 

  • With your 'Standard Tab' link selected, go to interactions and add a new element trigger to occur on "tab change".
  • Create a new timed animation when the tab is in view.
  • Select the load bar and add a new action to affect its size.
  • Set the width to 0% and duration to 0 seconds.
  • With the load bar still selected - add another action to affect size. This time we will set the width to 100% and duration to 6 seconds.


Step 4. Now we need to make the load bar reset to 0% when it is not the current tab. 

We want to create another new animation when tab is out of view. With the load bar selected, start a new animation and set its size to 0% width with 0 second delay.

All that's left to do is admire your awesome new animation.

Enjoyed this read?

Stay up to date with the latest video business news, strategies, and insights sent straight to your inbox!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.