(This page includes affiliate links. If you click and purchase, I receive a small commission at no extra cost from you and that way you can support me. I only recommend tools that I have personally used and loved.)
Tutorial Video:
Don’t want to make from scratch? Get the template instead 🙂
Introduction – Hero Autoplay Tabs with Elementor And GSAP
In this tutorial, we will create a hero tab switcher that changes on autoplay with a line effect. Made in Elementor using Javascript and GSAP.
#1
Maintenance
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
#2
Research
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
#3
Deployment
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Autoplay Tabs Code
- dm-content-tabs are the CSS classes of the tabs container.
- dm-tab-active is the CSS class given to the active tab automatically.
- dm-tab-progress-line is the CSS class given to the line to show progress.
- dm-tab-progress-line-active is the CSS class automatically given to the active tab’s line.
- dm-hero-slides is the CSS class given to the slides.
- dm-hero-slides-active is the CSS class given to the active slide automatically.
- To understand customization, please watch the above video.
<style>
.dm-content-tabs {
transition: 0.5s opacity;
opacity: 0.2;
cursor: pointer;
}
.dm-tab-active {
opacity: 1;
transition: 0.5s opacity;
}
.dm-tab-progress-line {
transition: width 0.5s;
width: 0% !important;
}
.dm-tab-progress-line-active {
transition: width 5s linear;
width: 100% !important;
}
.dm-hero-slides {
opacity: 0;
pointer-events: none;
}
.dm-hero-slides-active {
opacity: 1;
pointer-events: auto;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', () => {
const dmLeftTabs = document.querySelectorAll('.dm-content-tabs');
const dmProgressLines = document.querySelectorAll('.dm-tab-progress-line');
const dmRightTabs = document.querySelectorAll('.dm-hero-slides');
const tabAmount = dmLeftTabs.length;
let tabIndex = -1; // default starting index
let isTabClicked = false;
function tabIndexManager() {
tabIndex++;
if (tabIndex == tabAmount) {
tabIndex = 0;
}
return tabIndex;
}
function animateTab(currentIndex) {
// Left Tab Animations
dmLeftTabs.forEach((tabElement) => {
tabElement.classList.remove('dm-tab-active');
});
dmLeftTabs[currentIndex].classList.add('dm-tab-active');
// Progress Line Animations
dmProgressLines.forEach((lineElement) => {
lineElement.classList.remove('dm-tab-progress-line-active');
});
dmProgressLines[currentIndex].classList.add('dm-tab-progress-line-active');
// Right Tab Animations
dmRightTabs.forEach((rightTabElement) => {
rightTabElement.classList.remove('dm-hero-slides-active');
});
dmRightTabs[currentIndex].classList.add('dm-hero-slides-active');
}
function animateNextTab() {
const currentIndex = tabIndexManager();
animateTab(currentIndex);
}
// Add click event listeners to tabs
dmLeftTabs.forEach((tabElement, tabElementIndex) => {
tabElement.addEventListener('click', () => {
isTabClicked = true;
tabIndex = tabElementIndex; // set tabIndex to the clicked tab index
animateTab(tabIndex); // animate from clicked tab
});
});
if (!isTabClicked) {
animateNextTab(); // Run first animation tab
}
// Cycle through tabs every 5 seconds
setInterval(() => {
if (!isTabClicked) {
animateNextTab(); // continue cycling
} else {
isTabClicked = false;
}
}, 5000);
});
</script>
