Hi Nikolai - any chance you could do a video on how to create vertical tabs like these from scratch in Webflow please? I've tried several times in the past with less than average results... Cheers! 😊👍🏻
This animation is great bro. Thank you so much for it, I was looking at Asana's site and was looking for a way to build it like this. Just one question, do you think there is a way to start this animation when scrolling in view?
Oof would love to help but honestly not too sure, I remember that Timothy Ricks talks about how to do something similar in this video but you might have to do a bit of trial and error! ruclips.net/video/xiAqTu4l3-g/видео.html
hey! Would you be able to demonstrate how to recreate a sticky button that moves/transforms when scrolled out of view such as the one on paperpiller's website?
Hey Nikolai, thanks for this, implemented it on client website and the tabs works perfectly. One question though, it seems the code is interfearing with webflow mobile navigation, it auto closes after a few seconds. I suspect it has something to do with the .menu-button class but not sure. Have you encounter similar problem or perhaps has tips to fix it? thank you.
@@Pinchejoss Hey, I did but I didn't document it properly and not using it right now on any of my projects. Found a code that let us change when the script works, based on vertical distance from the top. Sorry I can't be more helpful.
Hi Nikolai thanks for tutorial but I'm facing a problem that my time bar animation is not reseting.. Is it because of same class applied to tab content ? or if I add custom code will it manage to find to reset automaticalluy ? please help me this brother
Hey Andrea! See a working version here: etro-website.webflow.io/ Could you try paste the custom code in the section one more time and see how it goes? :)
I've tried the code but it didn't work So here is an updated one that works: var Webflow = Webflow || []; Webflow.push(function () { // Fix for Safari if (navigator.userAgent.includes("Safari")) { document.querySelectorAll(".tab-link").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-list').children('.w--current:first').next(); if($next.length) { $next.click(); // user click resets timeout } else { $('.tab-link:first').click(); } }, 5000); // 5 Second Rotation } // Reset Loops $('.tab-link').click(function() { clearTimeout(tabTimeout); tabLoop(); }); });
“How de do dat” should be a new series!!
Thank you for all your great and short tutorials!
Thank you for watching them! 🙌🏻
Hi Nikolai, fiiiinaaaally I have been able to fix the auto menu close problem - Thank you for the code snippet! I learn a lot from your videos!
Thanks for this tutorial !
Perfect, thank you Nikolai!
Thank you for your video, very concise, and helped me to do something similar manipulating tabs in Webflow.
awesome!!! A great webflow tutorial.
Thanks Jun! Glad you liked it 🔥
you are a legendddd!
Awesome tutorial, thanks a ton!!
Hi Nikolai - any chance you could do a video on how to create vertical tabs like these from scratch in Webflow please?
I've tried several times in the past with less than average results...
Cheers! 😊👍🏻
More than happy to cover that in the future, might show off a couple of different ways to build nice tab elements 😊
interested to
@@NikolaiBain
Nice, again 👍
Awesome!
Question - my auto rotate is stopping after the first one, any idea why this could be happening? I'm using a CMS powered dynamic tab list.
Smooth.
This animation is great bro. Thank you so much for it, I was looking at Asana's site and was looking for a way to build it like this. Just one question, do you think there is a way to start this animation when scrolling in view?
Oof would love to help but honestly not too sure, I remember that Timothy Ricks talks about how to do something similar in this video but you might have to do a bit of trial and error! ruclips.net/video/xiAqTu4l3-g/видео.html
Amazing!!
Hi, can you show us how to create tabs like these but with different time intervals?
hey! Would you be able to demonstrate how to recreate a sticky button that moves/transforms when scrolled out of view such as the one on paperpiller's website?
You bet and thanks for the video recommendation! I've checked out their website and put the video idea on my backlog 🌟
THANKS!
No worries! 🦾
Hey Nikolai, thanks for this, implemented it on client website and the tabs works perfectly.
One question though, it seems the code is interfearing with webflow mobile navigation, it auto closes after a few seconds. I suspect it has something to do with the .menu-button class but not sure. Have you encounter similar problem or perhaps has tips to fix it? thank you.
Did u figure out how to solve this issue?
@@Pinchejoss Hey, I did but I didn't document it properly and not using it right now on any of my projects. Found a code that let us change when the script works, based on vertical distance from the top. Sorry I can't be more helpful.
Please Teach us to create this vertical tabs element
Why are we alive? That's the ultimate question
You have to ask it every one in a while 🧐🍷
@@NikolaiBain Did you find the custom code solution to this question? Very curious to know.
this affects the navbar on mobile, does not allow it dropdown and closes the navbar , is there a fix for this
Hi Nikolai thanks for tutorial but I'm facing a problem that my time bar animation is not reseting.. Is it because of same class applied to tab content ?
or if I add custom code will it manage to find to reset automaticalluy ?
please help me this brother
How they do dat?
Just a recommendation for future videos, look at the lens, not the screen cuz in videos it'll always look like you're talking to someone next to me
Haha yeah you're right, cheers for the feedback!
"How dey do dat?" 😂
Hey Nikolai, do you by chance know how to get the code to work on two instances of auto-rotating tabs on the same page?
How does that paragraph text hide and show in tab change?
I have followed steps by steps, unfortunately it is not working with this code snippet. Has it worked for someone here?
Hey Andrea! See a working version here: etro-website.webflow.io/
Could you try paste the custom code in the section one more time and see how it goes? :)
@@NikolaiBain I found where the problem was. It was due to the plugin that you use to copy-paste the code in. Now it works, thanks.
I've tried the code but it didn't work
So here is an updated one that works:
var Webflow = Webflow || [];
Webflow.push(function () {
// Fix for Safari
if (navigator.userAgent.includes("Safari")) {
document.querySelectorAll(".tab-link").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-list').children('.w--current:first').next();
if($next.length) {
$next.click(); // user click resets timeout
} else {
$('.tab-link:first').click();
}
}, 5000); // 5 Second Rotation
}
// Reset Loops
$('.tab-link').click(function() {
clearTimeout(tabTimeout);
tabLoop();
});
});
Thanks man
Really was facing issue with safari.
This code resolves the issue of section scrolling automatically to the tab.
@@chakradharisaurabh anytime man. have fun