Lottie adalah format terbuka untuk grafis vektor animasi

 (lottie.github.io)
2 poin oleh GN⁺ 2025-05-26 | 1 komentar | Bagikan ke WhatsApp
  • Lottie adalah format berkas terbuka untuk animasi grafis vektor, yang memungkinkan animasi yang dibuat di Adobe After Effects diputar dengan mudah di web dan perangkat mobile
  • Animasi disimpan dalam format JSON, yang memuat semua elemen animasi seperti keyframe, kurva easing, dan informasi layer
  • Format ini merupakan standar terbuka dengan ekstensibilitas, independensi resolusi, dan beragam implementasi renderer, dan banyak perusahaan memanfaatkannya untuk meningkatkan pengalaman pengguna
  • Lottie Animation Community (LAC) adalah proyek open source nirlaba di bawah Linux Foundation, yang bertujuan mengembangkan format ini menjadi standar industri
  • Spesifikasi, alat validasi, implementasi, dan roadmap dikembangkan dan dipublikasikan oleh komunitas, serta dijalankan dengan struktur yang transparan dan kolaboratif yang terbuka bagi siapa saja untuk berpartisipasi

Apa itu Lottie

Gambaran umum

  • Lottie adalah format animasi vektor open source yang dikembangkan pada 2015 oleh Hernan Torrisi
  • Animasi yang dibuat di After Effects dapat diekspor sebagai file JSON Lottie dan diputar di berbagai platform
  • Saat ini, Lottie merupakan format standar yang digunakan secara luas di berbagai platform seperti web, mobile, dan TV

Fitur

  • Berbasis grafis vektor
    • Disusun dari bentuk geometris (garis, kurva, dan sebagainya), bukan berbasis piksel, sehingga dapat menampilkan gambar yang tajam tanpa bergantung pada resolusi
  • Tweening
    • Metode yang secara otomatis menginterpolasi perubahan di antara keyframe yang ditentukan animator
    • Memungkinkan animasi yang halus tanpa harus membuat gerakan kompleks secara manual
  • Format berbasis JSON
    • Karena direpresentasikan dalam JSON, format ini mudah dikirim melalui web, serta mudah diedit atau diotomatisasi dengan alat yang sudah ada
    • Karena merupakan standar terbuka, siapa pun dapat membuat implementasinya dan interoperabilitasnya sangat baik
  • Ekosistem yang matang
    • Tersedia ekosistem yang kuat mencakup player, aset, alat produksi, dan library
    • Digunakan oleh banyak perusahaan seperti Airbnb dan Google, serta didukung di berbagai alat dan framework

Lottie Animation Community (LAC)

  • Komunitas nirlaba yang didirikan di bawah Linux Foundation untuk standarisasi dan penyebaran Lottie
  • Bertujuan menetapkan format file Lottie sebagai standar animasi lintas platform
  • Beroperasi di bawah tata kelola Joint Development Foundation dan mendorong kolaborasi terbuka
  • Menyediakan fondasi ekosistem melalui dokumen spesifikasi yang jelas, alat validasi (Validator), daftar implementasi, dan roadmap
  • Dengan struktur yang memungkinkan siapa pun berpartisipasi dan berkontribusi, komunitas ini menekankan transparansi dan perkembangan yang dipimpin komunitas

Bacaan terkait

1 komentar

 
GN⁺ 2025-05-26
Opini Hacker News

  • Setiap kali memakai Lottie, selalu ada rasa sayang karena idenya memang keren, dan menarik karena animasi bisa diekstrak langsung dari tool yang memang sudah dipakai para animator, tetapi cara implementasinya terlalu mengecewakan. Untuk ranah ini, format biner yang jauh lebih ringkas sebenarnya jauh lebih cocok, tetapi justru menyimpan sekumpulan data numerik dalam JSON. Selain itu, karena JSON bisa merujuk ke file eksternal, pada praktiknya hasilnya bisa berupa beberapa file dalam sebuah folder, atau file-file yang di-inline sebagai base64 di dalam JSON, atau seluruhnya diberikan sebagai satu file terkompresi. Saat dimuat di web, kita harus memuat SDK yang ukurannya sangat besar, lalu animasi ini entah memuat beberapa file terpisah, atau satu file yang sama diproses berkali-kali oleh berbagai parser berbeda(JSON, base64, png, lottie, zip, dll). Jika memakai file .lottie, bundle JS bahkan harus menyertakan dekompresor zip, dan player .lottie terpisah juga menyertakan blob wasm 2MB, yang jujur saya tidak paham alasannya. Di aplikasi kami, hal ini membuat kami sangat menderita saat mencoba mengecilkan ukuran aplikasi, dan untungnya tidak dipakai di jalur inti, jadi kami berhenti sampai di situ. Kami harus melakukan banyak kerja kasar seperti optimasi animasi, membetulkan masalah path dan inline secara manual, menangani bug yang mengubah vektor menjadi png, dan sebagainya. Ditambah lagi, browser tidak terlalu kuat memutar banyak animasi sekaligus secara bersamaan, terutama di perangkat kelas bawah, dan efisiensi pemrosesan animasi di JS dan DOM ternyata lebih buruk dari yang dibayangkan. Kalau suatu saat ada waktu untuk proyek akhir pekan, saya sempat berpikir ingin bereksperimen mengubah ini menjadi sprite SVG yang dioptimalkan lalu memutarnya dengan transisi CSS untuk melihat apakah hasilnya lebih baik

    • Sangat relate, dan alur kerja ekspor dari After Effects ke Lottie memang terasa sangat mengerikan. Banyak layer dan style yang tidak berjalan dengan benar saat diekspor, jadi kita harus menjelaskan satu per satu kepada motion designer fitur mana yang boleh dipakai dan mana yang tidak, dan jelas para desainer tidak menyukai bagian itu. Sebenarnya, merendernya saja sebagai video lalu memutarnya sesuai interaksi justru sering kali jauh lebih ringan dan butuh kerja lebih sedikit. Saya juga pernah mendengar soal Rive, dan sepertinya fokus mereka memang memperbaiki masalah-masalah Lottie. Tapi saya sendiri belum mencobanya langsung, jadi hasilnya mungkin sangat tergantung kasus

    • Di perusahaan lama saya, ukuran bundle web app kami 8MB(sekitar 2MB setelah dikompresi), dan setelah ditelusuri ternyata sebagian besar berasal dari library Lottie(2MB) dan hanya empat animasi. Kami menghapus dua animasi, lalu sisanya dibuat lazy-loaded bersama Lottie. Meski begitu, saya tetap tidak berhasil meyakinkan desainer atau developer lain bahwa bundle 8MB itu masalah besar, jadi rasanya saya kalah dalam pertarungan itu

    • Saya setuju dengan bagian bahwa browser tidak terlalu kuat saat harus memutar beberapa animasi Lottie sekaligus. Bahkan pada awal 2000-an, banyak halaman web penuh dengan iklan Flash animasi, dan memang ada isu performa, tetapi itu tetap bisa berjalan cukup baik bahkan di CPU single-core saat itu

    • Di sisi lain, format JSON jika dikompresi bisa menjadi sangat kecil dan juga cukup efisien untuk dimuat ke JavaScript VM

    • Saat saya memakai Lottie, pilihannya adalah antara mp4 dan Lottie. Dibandingkan mp4, Lottie jauh lebih kecil

  • Saya suka gagasan mengelola animasi dalam format umum yang terbuka. Namun dalam praktiknya, agak disayangkan karena developer web sering terlalu mudah memilih Lottie(dengan tambahan ratusan KB hanya untuk library/wrapper, belum lagi ukuran ekstra per animasi) daripada mempelajari animasi CSS atau SVG yang jauh lebih kecil dan lebih mudah disesuaikan. Saya juga kurang suka bahwa situs utama Lottie membanggakan ukuran file yang kecil, tetapi hanya membandingkannya dengan GIF atau PNG, bukan dengan animasi SVG/CSS. Meski begitu, untuk aplikasi mobile native rasanya ini bisa cukup cocok

    • Nilai utama Lottie ada pada animasi yang jauh lebih kompleks dan bebas daripada animasi sederhana seperti transisi CSS, lebih seperti komik kecil yang hidup. Itu terlihat jelas dari stiker bergerak di Telegram Messenger yang dibuat dengan Lottie(contoh: https://tlgrm.eu/stickers/Princess)

    • Berdasarkan pengalaman, tempat Lottie paling bersinar memang sebagai format target dari tool authoring desain, khususnya After Effects. Artikel yang dilampirkan juga menyebut titik itulah sebagai keunggulan asli Lottie dan format file ini. Tidak ada yang menulis ini secara manual. Saya sendiri sebagai developer aplikasi mobile pernah menangani animasi Lottie, tetapi bukan pembuatnya langsung

    • Menanggapi komentar “harusnya lebih banyak belajar animasi CSS atau SVG”, menurut saya Flash era Web 1.0 itu yang terbaik. CSS dan standar lain masih belum benar-benar mampu menyamai pengalaman yang dulu diberikan Flash. Flash adalah format video, format animasi, lingkungan pemrograman, video player, sistem UI interaktif, game engine, engine pengembangan MMO, tool infografik, dan banyak lagi, semuanya dalam satu paket. Kalau Adobe membuka format dan player-nya, mungkin sampai sekarang masih bertahan. Kita perlu melepaskan anggapan tetap bahwa CSS/SVG/HTML/JS adalah satu-satunya jalan, dan melihat bahwa setelah 40 tahun kita masih menghadapi masalah serupa menunjukkan bahwa mungkin kita memang perlu mencoba menemukan ulang rodanya

    • Bukankah seharusnya mungkin mengompilasi animasi Lottie menjadi SVG+JS? Rasanya hanya belum ada tool-nya saja

    • Animasi CSS(dan Web Animations API modern) bisa memakai akselerasi hardware, sedangkan library seperti ini(Lottie dan lain-lain) tidak

  • Saya punya sedikit pengalaman menanamkan dan mengimplementasikan Lottie maupun Rive, dan pengalaman dengan Rive jauh lebih baik. Kalau nanti harus memilih antara Lottie dan Rive lagi, saya penasaran apakah ada hal yang saya lewatkan

    • Saya belum pernah memakai Rive secara langsung, hanya memantau perkembangannya. Menarik bahwa developer yang membuat Lottie bergabung dengan tim Rive sekitar dua tahun lalu. Kalau saya harus mengevaluasi tool baru di area ini, Rive pasti akan saya pertimbangkan. Di proyek yang saya kerjakan, saya cukup vokal menolak Lottie karena sulit membenarkan ukuran filenya dibanding animasi yang diinginkan desainer. Saya juga pernah berhasil memakai SVGator. Saya juga frustrasi karena Lottie sering dipromosikan berlebihan di banyak tempat(tetapi tanpa pembahasan soal ukuran file), terutama lewat tool seperti Webflow dan influencer industri. Saya yakin ada use case yang sangat cocok untuk Lottie, tetapi untuk kebanyakan kebutuhan umum, menurut saya ada pilihan yang lebih baik

    • Saya belum pernah mendengar tool bernama Rive, tetapi ini terasa seperti penemuan yang sangat menarik karena sepertinya bisa dipakai di proyek saya. Hal-hal seperti inilah yang membuat saya tidak bisa berhenti membaca HN

  • Library UI perusahaan kami memakai lottie-web untuk animated component(seperti spinner, progress bar, dll). Tetapi ketika mengunjungi halaman https://airbnb.io/lottie/#/community-showcase, kipas laptop kantor saya langsung meraung seperti orang gila. Rasanya kalau dibuat dengan CSS, dampak seperti ini tidak akan terjadi

    • Yang ada di halaman itu semuanya adalah GIF animasi

  • Konsep Lottie memang sangat keren, tetapi saat benar-benar dipakai ternyata sangat sulit dikerjakan. Rive adalah platform baru yang mencoba menyelesaikan bagian-bagian yang bermasalah di Lottie. Khususnya, pembaruan data dinamis di Lottie pada praktiknya hampir mustahil. Meski begitu, kami pernah membuat animasi dengan data yang diperbarui secara dinamis untuk Valorant Backtrack milik Tracker.GG(formatnya mirip Spotify Wrapped) menggunakan Lottie(demo: https://tracker.gg/valorant/backtrack/episode6/00d0aa2d-94d3-49ff-823c-8123f2b62848/eyJtb2RlIjoiY29tcGV0aXRpdmUifQ==/0). Untuk itu kami mengakses langsung layer-layer bernama dari source file(After Effects), membuat tiap slide menjadi file Lottie terpisah, lalu menerapkan transisi yang halus antar-slide secara manual. Karena Lottie sendiri pada dasarnya tidak mendukung akses layer dinamis, kami mengendalikan instance Lottie dengan library terpisah dan membangun layer kontrol data kami sendiri di atasnya. Diperlukan sangat banyak iterasi bolak-balik antara desainer dan engineer, jadi ini format yang kurang ramah untuk kolaborasi. Dalam beberapa kasus, kami bahkan harus memakai trik seperti menargetkan properti layer ke nilai default yang sebenarnya(misalnya warna). Format ini benar-benar sulit ditangani. Ke depannya saya ingin mencoba memakai Rive

  • Kami sudah bertahun-tahun memakai Lottie untuk animasi brand PBS KIDS. Dibanding format lain, ada banyak kelebihan, dan walau performanya menurun saat runtime rendering 2D datar semakin banyak, ini tetap bisa terintegrasi cukup mulus ke berbagai pipeline(game, aplikasi, video). Untuk perangkat/platform yang relatif rendah spesifikasinya(seperti Roku), kami biasanya menyediakan gambar statis sebagai gantinya. Berkat workflow dengan After Effects, satu desainer bisa membuat animasi loop lalu mengekspornya sekaligus menjadi Lottie/Bodymovin json, Mov(untuk siaran/YouTube), dan SVG(untuk perangkat rendah spesifikasi). Setelah era Flash, ini adalah format pengganti sementara yang sangat bagus. Sekarang kami juga mulai memanfaatkan Rive, dan animasi json lama pun bisa dibawa ke workflow baru. Saya pernah bekerja sama dengan tokoh-tokoh kunci di bidang ini(misalnya Mat Groves dari Pixi, Matt Karl dari CloudKid, dll), dan pada masa transisi dari Flash, semua orang mencoba pendekatan, plugin, matematika, dan format ekspor yang berbeda-beda. Masing-masing upaya itu punya tempatnya sendiri, dan karena struktur software animasi berbasis timeline, masalah interoperabilitas antarformat akan selalu ada. Pada akhirnya, yang penting adalah memilih tool yang paling cocok untuk proyeknya

  • Kami memakai lottielab untuk membuat animasi di situs kami(https://resonancy.io), dan editornya benar-benar sangat bagus karena dibangun berbasis SVG, mungkin yang terbaik di antara tool online sejenis. Secara keseluruhan pengalamannya mulus. Namun, kalau tidak diekspor lewat layanan hosting kompresi proprietary milik lottielab, ukuran animasinya terlalu besar sehingga hampir mustahil dipakai di landing page. Hosting kompresi itu rata-rata mengurangi ukuran sekitar 400%, jadi akhirnya kami membayar 30 dolar per bulan untuk hosting tersebut. Saya tetap akan mencari format alternatif, tetapi saya juga tidak ingin mengulang lagi seluruh proses pembuatan animasinya. Berdasarkan pengalaman saya dulu dengan library animasi berbasis React, menulis animasi kompleks secara manual itu terlalu sulit, tetapi di lottielab saya bisa membuatnya relatif mudah sesuai yang saya bayangkan. Saya belum mencoba Rive, tetapi berencana mengujinya. Saya juga ingin mendapat rekomendasi tool atau library eksternal yang bisa mengompresi format Lottie dengan baik

  • Saya tidak paham mengapa SWF dianggap bermasalah. Spesifikasinya terbuka dan sangat efisien. Kalau kekhawatiran utamanya keamanan, seharusnya implementasi masih memungkinkan bahkan tanpa fitur-fitur tingkat tinggi yang Turing complete. Saya setuju dengan komentar saudara yang menyebut ini “hanya format JSON lain lagi”. Rasanya satu generasi developer yang sudah terlalu terbiasa dengan lingkungan web yang tidak efisien sampai melupakan konsep efisiensi itu sendiri

  • Saya penasaran apa SOTA(mutakhir) untuk pembuatan animated vector graphic saat ini. LLM tidak pandai menggambar path SVG yang estetis, dan model gambar berbasis diffusion juga hanya mendukung bitmap. Permintaan akan Illustrator AI generatif yang terhubung dengan After Effects tampaknya besar, jadi saya berharap ada yang melakukan terobosan menarik

  • Masalah dengan Rive(layanan pesaing) adalah dari sudut pandang artistik, tool itu kurang intuitif. Kita tidak bisa menggambar langsung dengan pena atau blob tool, dan harus mengikuti workflow tertentu(umumnya mengimpor SVG), jadi jauh dari UI intuitif seperti Flash. Tentu ada banyak fitur yang menarik, tetapi belum terasa semudah dan seintuitif Flash

    • Gambar raster(bitmap) juga didukung sebagai tipe input