Tab bar pada JavaScript adalah sebuah komponen antarmuka pengguna yang biasanya digunakan dalam pengembangan web untuk menyediakan navigasi yang mudah antara berbagai bagian atau konten yang terpisah dalam sebuah halaman web. Tab bar biasanya terdiri dari beberapa tab yang dapat diklik oleh pengguna untuk beralih antara konten yang berbeda.

Pada dasarnya, tab bar terdiri dari dua komponen utama:

1. Tab: Setiap tab adalah elemen yang dapat diklik yang mewakili satu bagian atau konten tertentu. Ketika sebuah tab diaktifkan, konten yang sesuai dengan tab tersebut akan ditampilkan kepada pengguna.

2. Konten: Konten yang sesuai dengan setiap tab akan ditampilkan ketika tab tersebut diaktifkan. Ini bisa berupa teks, gambar, formulir, atau konten web lainnya.

1. Code HTML

<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/inter-ui/3.19.3/inter.css">
 <nav>
  <ul>
  <li class="active">
   <button>Animation</button>
  </li>
  <li>
   <button>Branding</button>
  </li>
  <li>
   <button>Illustration</button>
  </li>
  </ul>
 </nav>
<script src="https://unpkg.co/gsap@3/dist/gsap.min.js"></script>

Program di atas adalah contoh kode HTML yang mencakup beberapa elemen HTML dan juga menghubungkan ke beberapa sumber daya eksternal, seperti stylesheet dan skrip JavaScript. Mari kita jelaskan setiap bagian dari program tersebut:

1. Link Stylesheet: Baris ini menghubungkan dokumen HTML ke sebuah stylesheet eksternal dari Inter UI. Stylesheet ini kemungkinan mendefinisikan gaya tata letak dan tampilan untuk elemen-elemen HTML dalam dokumen.

2. Navigation: Ini mendefinisikan sebuah elemen navigasi (<nav>) yang berisi sebuah daftar tak terurut (<ul>) yang terdiri dari tiga item daftar (<li>). Setiap item daftar memiliki tombol (<button>) yang mewakili setiap kategori.

   • Setiap tombol memiliki teks yang berbeda, masing-masing mewakili kategori yang berbeda.
   • Kelas "active" diberikan pada elemen pertama (<li>) untuk menunjukkan bahwa kategori "Animation" sedang aktif atau dipilih.

3. Script: Ini mengimpor skrip JavaScript dari GSAP (GreenSock Animation Platform) untuk menambahkan fungsi animasi ke dalam dokumen.

   • GSAP adalah perpustakaan JavaScript yang kuat untuk membuat animasi pada elemen HTML. Dengan mengimpor skrip ini, Anda dapat menggunakan fitur animasi GSAP dalam dokumen HTML Anda.

Dengan demikian, program ini adalah contoh halaman HTML sederhana yang menggunakan sebuah navigasi dengan tombol-tombol dan menghubungkan ke sebuah perpustakaan JavaScript eksternal untuk animasi.

2. Code CSS

/* Code Pertama */
nav ul {
margin: 0;
padding: 0;
list-style: none;
display: flex;
gap: 40px;
}

nav ul li button (
appearance: none;
border: none;
cursor: pointer;
background-color: transparent;
padding: 0;
margin: 0;
font-family: "Inter";
font-weight: 600;
font-size: 16px;
list-style: 22px;
color: #505866;
transition: color 0.25s;
}

nav ul li.active button {
color: #fff; 
}

nav ul li:not(.active):hover button {
color: #807E8C;
}

/* Code Kedua */
nav active-element {
--active-element-scale-x: 1;
--active-element-scale-y: 1;
--active-element-show: 0;
--active-element-opacity: 0; --active-element-width: 0px;
--active-element-strike-x: 0%;
--active-element-mask-position: 0%;
position: absolute;
left: 0;
top: 34px;
height: 3px;
width: 36px;
border-radius: 2px;
background-color: #fff;
opacity: var(--active-element-show);
}

nav active-element > svg.
nav active-element.strike {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
opacity: var(--active-element-opacity);
width: var(--active-element-width);
mix-blend-mode: multiply;
}

nav active-element > svg {
display: block;
overflow: visible;
height: 5px;
}

nav .active-element .strike (
mask-image: linear-gradient(to right, transparent calc(0% + 
var(--active-element-mask-position)), black calc(15% + 
var(--active-element-mask-position)), black 80%, transparent);
padding: 24px 0

nav .active-element .strike svg {
display: block;
overflow: visible;
height: 12px;
width: calc (var(--active-element-width) 2);
transform: translate(var(--active-element-strike-x), 30%)
scale (var(--active-element-scale-x), var(--active-element-scale-y));
nav active-element strike svg:last-child (
transform: translate(var(--active-element-strike-x), -30%) scale(-1);
nav active-element strike svg g path:nth-child(2) {
filter: blur(2px);
}

nav .active-element .strike svg g path:nth-child(3) {
filter: blur(4px);
}
  
nav.before.active-element {
transform: rotateY(180deg);
}

Program di atas adalah kumpulan aturan gaya CSS yang digunakan untuk mengatur tampilan dan perilaku dari elemen-elemen navigasi dan elemen yang menandai tab aktif pada sebuah tab bar. Mari kita bahas setiap bagian dari kode tersebut:

1. Styling untuk <nav>, <ul>, dan <li>:

   • Mengatur tampilan daftar menjadi horizontal dan menghilangkan spasi dan bullet menggunakan display: flex, margin, padding, dan list-style.
   • Menetapkan jarak antara elemen-elemen dengan gap.

2. Styling untuk Tombol Tab (<button>)

   • Menghapus gaya default sistem operasi menggunakan appearance: none;.
   • Mengatur properti seperti border, cursor, background-color, padding, margin, font, dan warna teks.

3. Styling untuk Tombol Tab Aktif:

   • Mengubah warna teks tombol menjadi putih saat tombol aktif.

4. Styling untuk Tombol Tab Non-Aktif saat Hover:

   • Mengubah warna teks tombol menjadi abu-abu saat tombol tidak aktif dihover.

5. Styling untuk Elemen yang Menandai Tab Aktif (active-element)

   • Mengatur posisi, dimensi, dan warna elemen yang menandai tab aktif.
   • Menggunakan variabel CSS untuk mengatur properti-properti seperti opacity, width, dan transformasi.

6. Styling untuk Struktur Anak-anak dari Elemen yang Menandai Tab Aktif (active-element > svg)

   • Mengatur tampilan, dimensi, dan transformasi dari struktur anak-anak SVG.
   • Mengatur overflow menjadi visible untuk memastikan konten tidak dipotong.

7. Styling untuk Animasi Garis Pada Elemen yang Menandai Tab Aktif

   • Mengatur efek animasi garis menggunakan mask image, transformasi, dan blur filter.

8. Styling untuk Transformasi Elemen Sebelum Elemen yang Menandai Tab Aktif

   • Mengatur rotasi untuk mengubah orientasi elemen sebelum elemen yang menandai tab aktif.

3. Code JavaScript

const navElement document.querySelector("nav");
const activeElement= document.createElement("div");
activeElement.classList.add("active-element");

const getOffsetLeft (element) => {
const elementRect element.getBoundingClientRect();

return (
elementRect.left
navElement.getBoundingClientRect().left +
(elementRect.width activeElement.offsetWidth) / 2
 );
};

navElement.appendChild(activeElement);
const activeButton navElement.querySelector("ul li.active button");

document.fonts.ready.then(() => { gsap.set(activeElement, (
x: getOffsetLeft(activeButton),
});

gsap.to (activeElement, {
"--active-element-show": "1",
duration: 9.2,
 });
});

navElement.querySelectorAll("ul li button").forEach((button, index) => { button.addEventListener("click", () => {

const active navElement.querySelector("ul li.active");
const oldIndex [active.parentElement.children].indexOf(active);

if (
index oldIndex ||
navElement.classList.contains("before") ||
navElement.classList.contains("after")
){

return;
}
const x = getOffsetLeft(button);
const direction index > oldIndex? "after": "before";
const spacing Math.abs(x getOffsetLeft(active));

navElement.classList.add(direction);
active.classList.remove("active");
button.parentElement.classList.add("active");

Program di atas adalah potongan kode JavaScript yang bertujuan untuk menambahkan efek animasi pada elemen yang menandai tab aktif pada sebuah tab bar. Mari kita bahas setiap bagian dari kode tersebut:

1. Seleksi Navigasi dan Pembuatan Elemen Aktif:

   • const navElement = document.querySelector("nav");: Memilih elemen navigasi di dalam dokumen menggunakan querySelector.
   • const activeElement = document.createElement("div");: Membuat sebuah elemen div baru yang akan digunakan untuk menandai tab aktif.
   • activeElement.classList.add("active-element");: Menambahkan kelas CSS "active-element" ke elemen yang baru dibuat.
   • navElement.appendChild(activeElement);: Menambahkan elemen yang baru dibuat ke dalam elemen navigasi.

2. Fungsi untuk Mendapatkan Posisi Horizontal Elemen:

   • const getOffsetLeft = (element) => { ... }: Sebuah fungsi yang menghitung posisi horizontal suatu elemen relatif terhadap elemen induknya. Ini digunakan untuk menentukan posisi elemen yang menandai tab aktif.

3. Penyesuaian Awal Animasi:

   • const activeButton = navElement.querySelector("ul li.active button");: Memilih tombol yang aktif pada saat awal. Ini akan menjadi tombol yang diberi animasi saat halaman dimuat.
   • document.fonts.ready.then(() => { ... }: Menunggu hingga semua font dalam halaman telah dimuat sebelum melanjutkan animasi.

4. Animasi untuk Memperlihatkan Elemen Aktif:

   • gsap.set(activeElement, { ... }: Mengatur posisi awal elemen yang menandai tab aktif dengan menggunakan GreenSock Animation Platform (GSAP).
   • gsap.to(activeElement, { ... }: Menganimasikan elemen yang menandai tab aktif untuk memperlihatkannya secara bertahap.

5. Pengaturan Event Listener untuk Tombol Tab:

   • navElement.querySelectorAll("ul li button").forEach((button, index) => { ... }: Menetapkan event listener untuk setiap tombol tab di dalam navigasi.
   • button.addEventListener("click", () => { ... }: Mendengarkan peristiwa klik pada setiap tombol tab.
   • Dalam handler klik, program mengambil indeks tombol tab yang diklik dan menghitung arah animasi berdasarkan perubahan indeks tersebut. Juga, menyesuaikan kelas CSS pada elemen navigasi sesuai dengan arah pergerakan.

Program tersebut menggabungkan GSAP untuk animasi dengan JavaScript murni untuk mengatur logika navigasi tab. Ini memungkinkan animasi halus saat pengguna berpindah antar tab.