Artikel ini membahas penggunaan “timing chart” sebagai metode perencanaan yang efektif untuk mengelola animasi SMIL (Synchronized Multimedia Integration Language) dalam SVG. Meskipun SMIL dapat menjadi rumit karena setiap tag hanya menargetkan satu elemen dan satu properti, timing chart membantu menyederhanakan proses perencanaan, memvisualisasikan urutan, dan menyinkronkan berbagai bagian animasi, menjadikannya alat penting untuk orkestrasi animasi yang kompleks.
Pengembang Johan, yang masih terkesima dengan evolusi teknologi dari tanda hitung di tulang hingga internet, merenungkan dampak penemuan mesin cetak terhadap dunia modern, sebagaimana dilansir dari https://www.smashingmagazine.com/feed/. Ia juga terus membagikan wawasan mingguan tentang front-end dan UX kepada lebih dari 182.000 pelanggan.
Secara default, setiap elemen di web adalah kotak, namun banyak <div> yang dianimasikan sering berpura-pura menjadi lingkaran. Akan tetapi, jika Anda pernah berinteraksi dengan elemen <circle> asli, Anda akan tahu bahwa mereka memiliki lebih banyak potensi. Dibalut dalam SVG, mereka dapat beradaptasi dengan lebih banyak lingkungan dibandingkan <div> sederhana yang menggunakan HTML/CSS. Tag <img>, misalnya, memiliki kebijakan ketat untuk tidak mendukung .html.
Tag <img> tidak sesetatis namanya. Meskipun JavaScript yang disematkan tidak akan berjalan jika Anda memuat file SVG dengan tag <img>, animasi CSS bekerja dengan sempurna. Banyak atribut SVG memiliki padanan properti CSS, dan properti geometri telah didukung di sebagian besar browser sejak tahun 2024. Namun, beberapa atribut yang mungkin ingin Anda animasikan, seperti viewBox, belum memiliki padanan.
Selain JavaScript dan CSS, ada cara lain untuk menganimasikan SVG: Synchronized Multimedia Integration Language (SMIL). Terlepas dari kekhasannya, SMIL masih layak dipelajari. Seperti animasi CSS, animasi SMIL juga berfungsi dalam tag <img> dan dapat sepenuhnya menganimasikan semua elemen dalam SVG, tanpa memerlukan JavaScript.
SMIL memiliki masalah: ia cepat membengkak. Tidak seperti CSS dan JavaScript, di mana Anda dapat mencantumkan beberapa properti dalam setiap keyframe dan dengan mudah menggunakan kembali animasi, setiap tag SMIL hanya dapat menargetkan satu elemen dan hanya satu properti dari elemen tersebut pada satu waktu. Meskipun satu properti dapat dianimasikan melalui daftar nilai, tetap saja satu tag untuk satu elemen dan satu properti. Ini membuat animasi SMIL bisa lebih panjang daripada padanannya dalam CSS.
Untuk mempermudah saat memulai animasi baru, disarankan untuk merencanakan semua elemen dan properti yang ingin dianimasikan, lalu membuat daftar ID deskriptif untuk setiap tag. Di sinilah peran timing chart menjadi krusial dalam mengatur alur kerja.
Timing chart adalah segmen garis; ada yang memilih garis horizontal, ada pula yang vertikal. Ini adalah analogi yang tepat untuk animasi secara keseluruhan karena segmen garis dapat berjalan paralel, tumpang tindih, dan saling mengikuti dengan atau tanpa jeda, persis seperti animasi. Fokus utama saat menggambar adalah kapan animasi dimulai dan berhenti, dengan menandai awal dan akhir setiap komponen animasi.
Bagian penting dari SMIL adalah sinkronisasi, bahkan namanya pun mengandung kata tersebut. Ada berbagai cara untuk menentukan kapan animasi harus dimulai, dan salah satu yang paling berguna adalah dengan nilai syncbase. Ini adalah ID tag SMIL diikuti oleh .begin atau .end, dengan offset positif atau negatif opsional. Misalnya, animasi kedua dapat menggunakan nilai syncbase colorChange.end - 300ms untuk memulai 300 milidetik sebelum animasi warna selesai, membuat waktu relatif antara kedua animasi menjadi eksplisit.
Dengan menggunakan nilai syncbase, awal animasi diposisikan secara relatif terhadap .begin atau .end dari animasi lain. Offset positif menggeser awal ke kanan (maju dalam waktu), dan offset negatif ke kiri (mundur dalam waktu). Ini memungkinkan pengaturan yang fleksibel, seperti semua animasi sekunder dimulai relatif terhadap satu animasi utama (misalnya, begin="primary.begin"), yang menyederhanakan pemeliharaan jika waktu mulai seluruh grup berubah.
Penting untuk dicatat bahwa komputer tidak dapat memprediksi masa depan; offset negatif hanya akan melompat animasi ke posisi yang seharusnya jika telah dimulai lebih awal. Animasi kedua hanya akan berjalan dari awal hingga akhir jika ada cukup ruang.
Browser memiliki dukungan luas untuk fitur media prefers-reduced-motion, dan sangat penting untuk menghormati preferensi pengguna ini. Ada berbagai pendekatan untuk mematuhi pengaturan ini dengan SMIL. Misalnya, menggunakan elemen <picture> yang mendukung beberapa elemen <source> sebagai fallback, atau file SVG dengan query media CSS @media yang menggunakan display: none untuk menukar versi.
Pilihan lain termasuk menggunakan background-image CSS yang dapat dibungkus dalam query media @media (prefers-reduced-motion), elemen <view> SVG, atau antarmuka DOM SMIL dengan JavaScript .matchMedia() untuk mengontrol animasi. Untuk contoh dalam artikel ini, dipilih pendekatan animasi opasitas dan opsi <picture> saat menambahkan gerakan.
Sebagai ilustrasi, artikel ini membangun versi animasi tiga titik klasik. Disarankan menggunakan editor grafis seperti Inkscape untuk memvisualisasikan markup SVG. Perhatikan bahwa ID elemen harus diatur melalui properti objek atau editor XML Inkscape, dan file harus disimpan sebagai SVG yang dioptimalkan. Untuk spinner ini, enam tag <animate> digunakan untuk efek fade-in dan fade-out pada setiap titik, dengan skema penamaan yang jelas seperti #fadeInLeft, #fadeOutMiddle, dan seterusnya.
Artikel ini menyajikan beberapa contoh variasi timing chart untuk spinner, menunjukkan bagaimana perubahan pengaturan bagian-bagian animasi memengaruhi efek visual keseluruhan. Misalnya, titik-titik dapat muncul dari kiri ke kanan dengan semua fade-out berakhir bersamaan, atau fade-out dapat di-stagger seperti fade-in, atau bahkan memulai urutan dengan fade-out. Timing chart sangat membantu dalam melacak pekerjaan dan membandingkan versi visual, bahkan dapat mengungkapkan pola waktu yang mungkin terlewatkan.
Untuk menunjukkan bagaimana timing chart dapat membantu mengelola lebih banyak elemen, contoh spinner dasar dikembangkan dengan menambahkan elemen <rect> untuk setiap titik, dipindahkan ke dalam tag <clipPath>. Ini memberikan pendekatan berbeda untuk menganimasikan stroke daripada stroke-dashoffset. Perubahan ini mencakup animasi baru, penundaan antara fade-out dan restart loop, penggunaan properti fill-opacity untuk fade-in yang disinkronkan, dan penggunaan tag <set> untuk mereset properti setelah animasi fill="freeze".
Singkatnya, menyeimbangkan berbagai tahapan animasi bisa sangat sulit. Ketika menghadapi animasi multi-langkah, ini adalah bentuk orkestrasi, seperti membangun mesin Rube Goldberg dari markup. Menggunakan timing chart adalah strategi efektif yang membantu merencanakan kode dan membuat pembaruan serta pemeliharaan di masa mendatang jauh lebih mudah. Meskipun timing chart tidak dapat mengurangi kompleksitas markup, ia memberikan gambaran umum yang jelas tentang apa yang seharusnya terjadi dan kapan. Timing chart tidak terbatas pada animasi SMIL, meskipun nilai syncbase memang unik untuk SMIL.
(Sumber: https://smashingmagazine.com/2026/08/timing-charts-blueprint-smil-animations/)
