You realize your example has the same bug right ? 
And that’s normal, since it is exactly the same code 
2 Likes
Well now I’m embarrassed 
Hello,
Riley from the Customer Support team. 
We have recently pushed out an update that should allow this experience to run smoothly again. All that needs to be done is a site-republish, and everything should be back to normal.
Let me know if any further issues occur.
Riley
3 Likes
I still experience the issue with trigger moving tabs to viewport on Safari (v12.1.2). In Chrome it works perfectly.
I used the script by pepperclip and re-published the site but it still doesn’t work.
UPDATE:
I noticed the issue only occurs when I’m at the top of the page. If not, then it works fine.
2 Likes
It worked for me. I’m not having the issue anymore, either on Chrome or Safari for that matter.
1 Like
Aslo having trouble in Safari (Version 13.1), both on desktop and mobile.
I found this code worked pretty well out of the box, but I have 3 tabs, and it is not advancing past the 2nd tab. Any ideas why that might be?
I am having a similar issue.
The tabs don’t want to play, but switch back to tab 1 whenever you click on any subsequent tabs. https://buildmedia.webflow.io/temp
But it seems to work on a clone I made of the Flowbase sample projects at:
https://auto-play-tabs.webflow.io/
Any ideas? What am I missing?
1 Like
Hey @RileyJones —autoplay tabs are still anchoring in Safari (13.1) when user is at top of the page. Can you confirm that the team has tested their solution within this environment? Looks like I’m not the only one experiencing this @jensberg @Jovil
2 Likes
Since implementing the code I have a tab change from tab 1 to tab 2, but it doesn’t auto change to my 3rd tab. Any idea why @pepperclip ?
No idea sorry
I was having this issue also. I updated my code to the following which will
- Wait until the user scrolls down from the top to start
- Prevent the transition from firing if the user is at the top of the page
- Cancel the loop if a user manually clicks on a tab
The code:
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api
// time between automated clicks
var TAB_DELAY = 3000;
// setup the initial start (but only do it once)
var slideshowIsSetup = false;
var setupSlideshow = function() {
if(slideshowIsSetup) return;
slideshowIsSetup = true;
tabLoop();
};
// define loop - cycle through all tabs
var tabTimeout;
var tabLoop = function() {
tabTimeout = setTimeout(function() {
// don't scroll if at the top of the page
// fixes safari scroll jumping
if($(window).scrollTop() < 10) {
setTimeout(tabLoop, TAB_DELAY);
return;
};
var $next = $('.tabs_menu').children('.w--current:first').next();
if($next.length) {
$next.click(); // click resets timeout, so no need for interval
} else {
$('.tab_link:first').click();
}
}, TAB_DELAY);
}
// reset timeout if a tab is clicked
$('.tab_link').click(function(e) {
clearTimeout(tabTimeout);
// cancel slideshow if user clicked manually
if(!e.originalEvent) tabLoop();
});
// setup slideshow on initial scroll
$(window).scroll(setupSlideshow);
});
</script>
5 Likes
Hi Riley,
I’m still having these issue. When it pass to the next tab & if I’m not seeing them it will scroll all the way to the tabs. Hope someone can help me asap. Thanks!
Hi @pepperclip
I’m having the same problem and thought that you may have saved me, but I can see on your site that you are still having focus stolen by the tabs. just thought you might like to know.
1 Like
Hi @RileyJones
Has there been any update on this?
My site is solely based around having a user fill out a form, but the tabs continue to steal the focus making it really annoying.
Preview link:
https://teg-website-refresh.webflow.io/
Hi @Charlie_Bradford. I’m not sure I can see what you are describing. Seems to work fine on first look.
what I was referring to on your clients’ site (which was what was happening on mine) is when a user tries to enter their details into any text area (example join your clients’ mailing list), they will lose focus every time the tab switches.
Every CTA on my site is basically showing the contact form overlaying the page, so I couldn’t really have them lose focus every 6 seconds because of the tabs changing.
I also noticed that on mobile if you have the menu open it will close every time the tabs change too.
I don’t know if this is useful for anyone but here is the code I’ve used to stop the tabs from changing while the mobile menu is visible, and in my case, when the contact overlay is visible.
may not be the cleanest code, but I couldn’t get && working for some reason so just have some nested if statements
<script>
var Webflow = Webflow || [];
Webflow.push(function () {
// DOMready has fired
// May now use jQuery and Webflow api
// start everything
var tabTimeout;
clearTimeout(tabTimeout);
tabLoop();
var contact = $('#Contact'); //this variable is set to my contact overlay
var mobile = $('#nav-mob'); //this variable is set to my nav dropdown
// Cycle through all tabs. Match class names
function tabLoop() {
tabTimeout = setTimeout(function() {
var $next = $('.tabs-menu').children('.w--current:first').next();
if($next.length)
{
if ($(contact).is(":hidden")) //only run below code if form is not visible
{
if ($(mobile).is(":hidden")) //only run below code if mobile nav dropdown is not visible
{
$next.click(); // user click resets timeout
}
else
{
tabLoop(); // resart function
}
}
else
{
tabLoop(); // resart function
}
}
else if ($(contact).is(":hidden")) //only run below code if form is not visible
{
if ($(mobile).is(":hidden")) //only run below code if mobile nav dropdown is not visible
{
$('.tab-link:first').click();
}
else
{
tabLoop(); // resart function
}
}
}, 6000); // 6 second tab loop (change this)
}
// Reset loop if a tab is clicked
$('.tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
</script>
Hi, I’m having the exact same problem of not being able to continue typing in a text input area when one tab transitions to another. Similarly to @Charlie_Bradford, this is causing problems in filling out forms. Is there any way to address this?
Hi @niot117 ,
my workaround was to have my form as a pop-up, and when the form div is visible the tabs stop cycling through, then resumes the cycle when the div is hidden again.
you can see my code above, and here is a link to my site so you can see how it works.
hope this is helpful
I need multiple auto rotating tabs components on a page but only the first instance will work, does anyone know a fix to get the others to auto rotate as well??? Please help! thanks in advance.