Lottie adalah format file animasi berbasis JSON yang memungkinkan desainer mengirim animasi yang dapat dirender secara real-time di berbagai platform (seperti web, iOS, Android, dan React Native) tanpa perlu menggunakan file video atau GIF yang berat.

Secara sederhana, Lottie adalah teknologi yang mengambil animasi yang dibuat di perangkat lunak seperti Adobe After Effects dan mengubahnya menjadi file JSON yang sangat kecil dan ringan. File JSON ini kemudian diinterpretasikan dan dirender ulang oleh Lottie Player di situs web atau aplikasi Anda.

💡 Keunggulan Utama

Ukuran File Sangat Kecil: Karena berbasis vektor dan menggunakan data JSON, file Animasi ini jauh lebih kecil daripada GIF, MP4, atau bahkan format sprite sheet lainnya. Hal ini mempercepat waktu muat halaman web (Page Speed).
Kualitas Vektor: Animasi tetap tajam dan jernih di semua ukuran layar dan resolusi, karena berbasis vektor, bukan piksel.
Manipulasi Mudah: Animasi dapat dimanipulasi dengan kode. Anda dapat mengubah kecepatan, warna, arah, dan bahkan memicu animasi berdasarkan interaksi pengguna (seperti scroll atau hover).
Kinerja Tinggi: Animasi ini memanfaatkan rendering asli perangkat, sehingga menghasilkan animasi yang mulus dengan penggunaan CPU yang minimal.

🛠️ Kegunaan Lottie dalam Desain Web

Lottie sangat populer di kalangan desainer dan pengembang web, terutama untuk meningkatkan interaktivitas dan estetika situs. Beberapa kegunaannya meliputi:

Ikon Animasi: Menggantikan ikon statis dengan ikon yang bergerak, misalnya ikon loading, tombol like, atau toggle navigasi.
Ilustrasi Hero Section: Memberikan daya tarik visual yang tinggi pada bagian atas halaman tanpa memperlambat situs.
Animasi Loading atau Preloader: Menyajikan animasi yang menyenangkan saat konten sedang dimuat.
Umpan Balik Pengguna: Memberikan respons visual terhadap tindakan pengguna (misalnya, animasi centang hijau saat formulir berhasil dikirim).
Animasi Interaktif: Membuat animasi yang dipicu oleh gerakan scroll (scroll-based animation) untuk penceritaan digital.

🚀 Cara Menggunakan Lottie di WordPress dengan Elementor

Mengintegrasikan animasi ini ke dalam situs WordPress yang dibangun dengan Elementor relatif mudah. Elementor, terutama Elementor Pro, memiliki widget khusus untuk ini, atau Anda dapat menggunakan widget HTML dasar.

Langkah 1: Mendapatkan File Animasi Lottie

Anda perlu file animasi Lottie, yang berekstensi .json.

Membuat Sendiri: Buat animasi di Adobe After Effects, lalu ekspor menggunakan plugin Bodymovin atau LottieFiles Plugin.
Mengunduh dari Perpustakaan: Kunjungi situs seperti LottieFiles (lottiefiles.com), tempat Anda dapat mengunduh ribuan animasi gratis yang dibuat oleh komunitas.

Setelah Anda mendapatkan file .json, pastikan Anda mengunggahnya ke Media Library WordPress Anda, atau hosting di layanan eksternal jika Anda berencana menggunakan URL-nya.

Langkah 2: Memasukkan Lottie ke Elementor

Opsi A: Menggunakan Widget (Elementor Pro atau Addon)

Jika Anda menggunakan Elementor Pro atau plugin addon Elementor yang menyediakan widget Lottie (seperti Essential Addons, PowerPack, dll.):

Buka halaman Elementor tempat Anda ingin menambahkan animasi.
Cari dan tarik widget Lottie ke kanvas desain Anda.
Di panel Pengaturan (Konten), pilih sumber (Source):
- Media Library: Pilih file .json yang sudah Anda unggah.
- External URL: Tempelkan URL file .json dari LottieFiles atau hosting lainnya.
Sesuaikan Pengaturan:
- Loop: Aktifkan agar animasi berulang terus menerus.
- Autoplay: Tentukan apakah animasi harus mulai berjalan saat halaman dimuat.
- Trigger: Atur pemicu animasi (On Load, On Click, On Scroll, On Hover).
- Speed & Direction: Sesuaikan kecepatan dan arah pemutaran.

Opsi B: Menggunakan Widget HTML (untuk Implementasi Lottie Player)

Jika Anda tidak memiliki widget Lottie khusus, Anda bisa menggunakan widget HTML dan Lottie Player eksternal.

Sertakan Skrip Lottie Player: Tambahkan kode skrip Lottie Player di bagian header atau footer situs Anda (atau di bagian atas widget HTML jika Anda hanya menggunakannya di satu tempat).
HTML
```
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
```
Tambahkan Widget HTML: Tarik widget HTML ke kanvas Elementor Anda.
Masukkan Tag Lottie Player: Gunakan tag <lottie-player> untuk menampilkan animasi. Ganti YOUR_LOTTIE_JSON_URL dengan URL file .json Anda.
HTML
```
<lottie-player
  src="YOUR_LOTTIE_JSON_URL"
  background="transparent" 
  speed="1" 
  style="width: 300px; height: 300px;"
  loop  
  autoplay
></lottie-player>
```
Anda dapat menyesuaikan atribut seperti speed, loop, autoplay, dan style sesuai kebutuhan.

Mengenal Lottie: Animasi Vektor Ringan untuk Web