I'm experimenting with creating a tab button switching animation similar to a specific reference, but without using Bootstrap Tabs.
var tabs = $('.tabs');
var selector = $('.tabs').find('a').length;
//var selector = $(".tabs").find(".selector");
var activeItem = tabs.find('.active');
var activeWidth = activeItem.innerWidth();
$(".selector").css({
"left": activeItem.position.left + "px",
"width": activeWidth + "px"
});
$(".tabs").on("click", "a", function(e) {
e.preventDefault();
$('.tabs a').removeClass("active");
$(this).addClass('active');
var activeWidth = $(this).innerWidth();
var itemPos = $(this).position();
$(".selector").css({
"left": itemPos.left + "px",
"width": activeWidth + "px"
});
});@import url('https://fonts.googleapis.com/css?family=Roboto');
body {
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Roboto', sans-serif;
}
h2 {
margin: 0px;
text-transform: uppercase;
}
h6 {
margin: 0px;
color: #777;
}
.wrapper {
text-align: center;
margin: 50px auto;
}
.tabs {
margin-top: 50px;
font-size: 15px;
padding: 0px;
list-style: none;
background: #fff;
box-shadow: 0px 5px 20px rgba(0, 0, 0, 0.1);
display: inline-block;
border-radius: 50px;
position: relative;
}
.tabs a {
text-decoration: none;
color: #777;
text-transform: uppercase;
padding: 10px 20px;
display: inline-block;
position: relative;
z-index: 1;
transition-duration: 0.6s;
}
.tabs a.active {
color: #fff;
}
.tabs a i {
margin-right: 5px;
}
.tabs .selector {
height: 100%;
display: inline-block;
position: absolute;
left: 0px;
top: 0px;
z-index: 1;
border-radius: 50px;
transition-duration: 0.6s;
transition-timing-function: cubic-bezier(0.68, -0.55, 0.265, 1.55);
background: #05abe0;
background: -moz-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: -webkit-linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
background: linear-gradient(45deg, #05abe0 0%, #8200f4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#05abe0', endColorstr='#8200f4', GradientType=1);
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
<h2>Elastic Tabs</h2>
<h6>Click on tabs to see them in action</h6>
<nav class="tabs">
<div class="selector"></div>
<a href="#" class="active"><i class="fab fa-superpowers"></i>Avengers</a>
<a href="#"><i class="fas fa-hand-rock"></i>Hulk</a>
<a href="#"><i class="fas fa-bolt"></i>Thor</a>
<a href="#"><i class="fas fa-burn"></i>Marvel</a>
</nav>
</div>This is the current implementation of my tabs using Bootstrap, and I'm looking for ways to achieve the desired transition effect without relying on Bootstrap Tabs.
.nav-link {
transition-duration: 1.5s;
transition-timing-function: cubic-bezier(1, 0.1, 1, 0.7);
}<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e001e02">[email protected]</a>/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="45272a2a31363137243505706b756b77">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="d-flex align-items-start">
<div class="nav flex-column nav-pills me-3" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<button class="nav-link active" id="v-pills-home-tab" data-bs-toggle="pill" data-bs-target="#v-pills-home" type="button" role="tab" aria-controls="v-pills-home" aria-selected="true">Home</button>
<button class="nav-link" id="v-pills-profile-tab" data-bs-toggle="pill" data-bs-target="#v-pills-profile" type="button" role="tab" aria-controls="v-pills-profile" aria-selected="false">Profile</button>
<button class="nav-link" id="v-pills-messages-tab" data-bs-toggle="pill" data-bs-target="#v-pills-messages" type="button" role="tab" aria-controls="v-pills-messages" aria-selected="false">Messages</button>
<button class="nav-link" id="v-pills-settings-tab" data-bs-toggle="pill" data-bs-target="#v-pills-settings" type="button" role="tab" aria-controls="v-pills-settings" aria-selected="false">Settings</button>
</div>
<div class="tab-content" id="v-pills-tabContent">
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab" tabindex="0">Home</div>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab" tabindex="0">Profile</div>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab" tabindex="0">Messages</div>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab" tabindex="0">Settings</div>
</div>
</div>Seeking advice or assistance on achieving a similar transition animation effect as shown in the reference, but using Bootstrap Tabs buttons. Any suggestions are welcome!