Site icon Cssmayo

Web Animations API: Animasi Web Native Tanpa Library Eksternal

  • siti
    • Web Animations API

    JAKARTA, cssmayo.com – Animasi web selama ini hidup di dua dunia yang terpisah — CSS animations dan transitions yang deklaratif namun terbatas dalam kontrol programatik, dan library JavaScript seperti GSAP atau Anime.js yang sangat powerful namun menambah bobot halaman. Web Animations API hadir untuk menjembatani keduanya: performa CSS yang berjalan di compositor thread, namun dengan kendali JavaScript yang penuh dan ekspresif.

    Web Animations API (WAAPI) adalah standar JavaScript API yang memungkinkan pembuatan, kontrol, dan sinkronisasi animasi web secara programatik langsung dari browser tanpa memerlukan library animasi eksternal. Selain itu, WAAPI memberi developer akses ke Animation Model yang sama yang digunakan browser untuk menjalankan CSS animations — artinya performa yang didapat setara dengan animasi CSS, namun dengan fleksibilitas penuh dari JavaScript.

    Cara Kerja Web Animations API

    WAAPI bekerja melalui metode animate() yang tersedia pada setiap elemen DOM. Metode ini menerima dua argumen utama.

    Keyframes: Array objek yang mendefinisikan state animasi dari awal hingga akhir — persis seperti @keyframes di CSS namun ditulis dalam JavaScript.

    Options: Objek konfigurasi yang menentukan durasi, easing, delay, iterasi, dan arah animasi.

    javascript
    const element = document.querySelector('.box');

const animation = element.animate(
  [
    { transform: 'translateX(0px)', opacity: 1 },
    { transform: 'translateX(300px)', opacity: 0.5 },
    { transform: 'translateX(0px)', opacity: 1 },
  ],
  {
    duration: 1000,
    easing: 'ease-in-out',
    iterations: Infinity,
  }
);

    Metode animate() mengembalikan objek Animation yang bisa digunakan untuk mengontrol animasi secara programatik. Hasilnya adalah kendali yang sangat presisi atas setiap aspek animasi.

    Mengontrol Animasi dengan Web Animations API

    Keunggulan utama web animations API dibanding CSS animations murni adalah kemampuan kontrol programatik penuh melalui objek Animation:

    javascript
    // Jeda animasi
animation.pause();

// Lanjutkan animasi
animation.play();

// Mundur
animation.reverse();

// Lompat ke waktu tertentu (dalam milidetik)
animation.currentTime = 500;

// Ubah kecepatan (1 = normal, 2 = 2x, 0.5 = setengah)
animation.playbackRate = 2;

// Event saat animasi selesai
animation.onfinish = () => console.log('Animasi selesai!');

// Promise yang resolve saat animasi selesai
animation.finished.then(() => console.log('Selesai via Promise'));

    Selain itu, Animation.cancel() menghentikan animasi dan mengembalikan elemen ke state awalnya — sangat berguna untuk cleanup saat komponen dihapus dari DOM.

    Fitur Lanjutan Web Animations API: ScrollTimeline dan ViewTimeline

    Web animations API semakin powerful dengan penambahan dua timeline baru yang memungkinkan animasi berbasis scroll tanpa JavaScript scroll listener:

    ScrollTimeline: Menghubungkan progress animasi dengan posisi scroll container tertentu.

    javascript
    const scrollTimeline = new ScrollTimeline({
  source: document.documentElement,
  axis: 'block',
});

element.animate(
  [{ opacity: 0 }, { opacity: 1 }],
  { timeline: scrollTimeline }
);

    ViewTimeline: Animasi berbasis visibilitas elemen di viewport — elemen mulai beranimasi saat masuk viewport dan selesai saat keluar. Selain itu, ini memungkinkan efek scroll-driven animations yang dulu hanya bisa dilakukan dengan library berat seperti Intersection Observer + GSAP.

    Perbandingan Web Animations API dengan Alternatif Lain

    Memahami posisi web animations API di antara pilihan animasi yang ada:

    vs CSS Animations: CSS Animations unggul untuk animasi sederhana yang tidak perlu kontrol dari JavaScript. Sementara itu, webanimationsAPI diperlukan saat animasi perlu dikontrol secara dinamis, dimulai atau dihentikan berdasarkan kondisi, atau disinkronkan dengan animasi lain.

    vs GSAP: GSAP adalah library animasi JavaScript paling powerful dan populer dengan ekosistem plugin yang sangat kaya. Oleh karena itu, GSAP masih menjadi pilihan untuk animasi kompleks yang memerlukan fitur seperti timeline, morphing, dan scroll-triggered animations yang sangat rumit. Namun untuk animasi standar, WAAPI memberikan performa setara tanpa overhead library.

    vs CSS Transitions: CSS Transitions sangat sederhana dan cukup untuk state change dua arah. Selain itu, WAAPI diperlukan untuk multi-step animations, kontrol yang lebih presisi, atau animasi yang perlu disinkronkan.

    Kasus Penggunaan Web Animations API

    WAAPI paling tepat digunakan untuk:

    Browser Support Web Animations API dan Polyfill

    Web animations API didukung oleh semua browser modern — Chrome, Firefox, Safari, dan Edge. Fitur terbaru seperti ScrollTimeline dan ViewTimeline sudah tersedia di Chrome dan semakin didukung browser lain. Selain itu, untuk browser lama, tersedia polyfill web-animations-js dari Google yang memberikan kompatibilitas mundur.

    Kesimpulan

    Web Animations API adalah alat yang sangat powerful yang sudah tersedia langsung di browser tanpa perlu menginstal apa pun. Dengan kemampuan kontrol programatik yang penuh, performa yang setara dengan CSS animations, dan fitur scroll-driven animations yang semakin matang, WAAPI menjadi pilihan yang semakin menarik untuk animasi web modern. Selain itu, bagi developer yang ingin mengurangi ketergantungan pada library eksternal tanpa mengorbankan kapabilitas animasi, WAAPI adalah langkah yang sangat tepat untuk dijelajahi.

    Eksplorasi lebih dalam Tentang topik: Techno

    Cobain Baca Artikel Lainnya Seperti:

    Author

    Exit mobile version