Cara Pasang Animasi Lottie di Website, Simak 3 Metodenya!

Ingin membuat website kamu lebih menarik dan interaktif? Salah satu cara yang sedang naik daun adalah dengan memasang animasi Lottie di website. Animasi Lottie memiliki ukuran file yang kecil tapi visual yang menawan, sehingga menjadi pilihan ideal untuk memperkaya tampilan website tanpa membuat lemot performanya. 

Artikel ini akan membahas cara memasang animasi Lottie di website, serta manfaat dan tips penggunaannya. Yuk, simak!

Apa Manfaat Memasang Animasi di Website?

Menggunakan animasi Lottie di website bisa memberikan berbagai manfaat, loh! Berikut beberapa alasan kenapa kamu harus mempertimbangkan menggunakan animasi:

• Meningkatkan Pengalaman Pengguna
  Animasi memberikan pengalaman yang lebih dinamis dan interaktif. Pengunjung akan merasa lebih tertarik dan terlibat saat melihat elemen yang bergerak di halaman.
• Menceritakan Cerita Secara Visual
  Animasi membantu menyampaikan pesan lebih efektif. Daripada hanya menggunakan teks, animasi dapat menghidupkan cerita dan menarik perhatian pengunjung.
• Memperkuat Identitas Merek
  Dengan desain yang konsisten, animasi bisa memperkuat citra merek kamu. Kamu bisa menyesuaikan animasi sesuai dengan warna, font, dan elemen desain lain dari brand kamu.
• Meningkatkan SEO
  Penggunaan animasi bisa meningkatkan durasi pengunjung di website, yang pada gilirannya bisa membantu ranking SEO kamu. Semakin lama pengunjung tinggal, semakin baik untuk SEO situsmu.

Cara Memasang Animasi Lottie di Website

Ada beberapa metode yang bisa digunakan untuk menambahkan animasi Lottie di website, masing-masing dengan tingkat kesulitan dan fleksibilitas yang berbeda. Berikut adalah langkah-langkah terperinci untuk memasang animasi Lottie dengan tiga cara yang umum digunakan.

Metode 1: Menggunakan Fitur oEmbed LottieFiles

Metode oEmbed adalah cara yang paling cepat dan mudah untuk menambahkan animasi Lottie ke website, terutama jika kamu tidak ingin repot dengan kode atau plugin. Ikuti langkah-langkah berikut untuk memasang animasi Lottie menggunakan oEmbed:

Langkah 1: Kunjungi LottieFiles

• Mulailah dengan membuka situs LottieFiles di browser kamu (https://lottiefiles.com). Di sini, kamu bisa menemukan ribuan animasi Lottie gratis yang dapat digunakan. 
• Pilih animasi yang sesuai dengan kebutuhan website kamu, lalu klik pada animasi untuk membuka halaman detail.

Langkah 2: Salin URL oEmbed

• Setelah memilih animasi, pastikan kamu sudah login ke akun LottieFiles. Di halaman animasi, cari dan klik opsi Share yang biasanya berada di bagian bawah layar. 
• Pilih oEmbed dari pilihan yang tersedia, dan salin URL oEmbed-nya.

Langkah 3: Buka Halaman atau Postingan di WordPress

• Login ke dashboard WordPress kamu dan buka halaman atau postingan tempat kamu ingin menambahkan animasi. 
• Pastikan kamu menggunakan editor Gutenberg, yang memungkinkan menambahkan berbagai jenis blok dengan mudah.

Langkah 4: Tambahkan Blok Embed

• Klik ikon + di bagian editor Gutenberg untuk menambahkan blok baru. Pilih blok Embed yang memungkinkanmu untuk menyematkan konten dari URL eksternal. 
• Setelah blok Embed terbuka, tempelkan URL oEmbed yang sudah kamu salin dari LottieFiles.

Langkah 5: Klik Embed dan Animasi Akan Muncul

• Setelah menempelkan URL, tekan tombol Embed di blok tersebut. WordPress akan secara otomatis menampilkan animasi Lottie di halaman atau postingan kamu. 
• Jika semua langkah sudah benar, animasi akan langsung muncul dan dapat dilihat oleh pengunjung.

Catatan: Metode ini sangat mudah dan praktis, tapi tidak memungkinkanmu untuk mengedit animasi setelah disematkan. Oleh karena itu, pastikan kamu sudah puas dengan animasi yang dipilih sebelum memasangnya.

Baca Juga: AVIF vs WebP: Format Gambar Modern Mana yang Lebih Baik?

Metode 2: Memanfaatkan Plugin Lottie Block for Gutenberg

Jika kamu menginginkan lebih banyak kontrol dan fleksibilitas dalam menambahkan animasi, kamu bisa memasang animasi di website menggunakan plugin Lottie Block for Gutenberg di WordPress bisa menjadi pilihan yang lebih tepat. Berikut langkah-langkahnya:

Langkah 1: Instal dan Aktifkan Plugin

• Masuk ke dashboard WordPress kamu, lalu buka menu Plugins > Add New. 
• Cari plugin Lottie Block for Gutenberg dan klik Install Now.
• Kemudian aktifkan plugin tersebut setelah proses instalasi selesai.

Langkah 2:Login ke LottieFiles

• Setelah plugin aktif, kamu akan melihat blok baru bernama Lottie di editor Gutenberg. 
• Sebelum menambahkan animasi, pastikan kamu sudah login ke akun LottieFiles. Jika belum, kamu bisa membuat akun baru secara gratis di LottieFiles.

Langkah 3: Tambahkan Blok Lottie di Gutenberg

• Pada editor Gutenberg, tambahkan blok baru dengan mengklik ikon +. 
• Cari Lottie dan pilih blok tersebut untuk ditambahkan ke halaman atau postingan.

Langkah 4: Pilih Cara Memasukkan Animasi
Setelah menambahkan blok Lottie, kamu akan diberikan beberapa pilihan untuk memasukkan animasi:

• Discover animation: Klik untuk mencari animasi dari pustaka LottieFiles.
• Media Library: Pilih animasi yang sudah kamu upload sebelumnya ke media library WordPress.
• Insert from URL: Tempelkan link JSON dari animasi Lottie yang kamu pilih di LottieFiles.

Langkah 5: Sesuaikan Animasi

Setelah memilih animasi, kamu bisa langsung menyesuaikan tampilan animasi melalui pengaturan blok. Misalnya, kamu bisa mengubah latar belakang, ukuran animasi, dan bahkan mengatur animasi agar berjalan secara otomatis atau berhenti pada interaksi pengguna.

Plugin ini memberi kamu lebih banyak kendali atas tampilan dan pengaturan animasi, serta memungkinkanmu untuk menambahkan lebih banyak animasi dengan cara yang lebih mudah.

Baca Juga: Rekomendasi Plugin Slider WordPress Gratis dan Terbaik

Metode 3: Menggunakan HTML dan JavaScript

Bagi kamu yang lebih berpengalaman dengan kode dan membutuhkan lebih banyak fleksibilitas, metode ini memberi kontrol penuh atas animasi yang ditambahkan. Langkah-langkahnya adalah sebagai berikut:

Langkah 1: Pilih Animasi di LottieFiles dan Salin JSON File Link

• Buka akun LottieFiles dan pilih animasi yang ingin kamu pasang. 
• Setelah memilih animasi, klik opsi Use animation in HTML untuk mendapatkan link file JSON dari animasi tersebut. 
• Salin link JSON yang muncul.

Langkah 2: Salin Kode HTML dari LottieFiles
LottieFiles juga menyediakan kode HTML yang dapat digunakan untuk memasang animasi di website. 

• Klik pada </> Use in HTML untuk menampilkan kode HTML. 
• Salin seluruh kode HTML yang dimulai dengan <lottie-player> dan diakhiri dengan </lottie-player>.

Langkah 3: Tambahkan Kode HTML di WordPress

• Kembali ke dashboard WordPress dan buka halaman atau postingan tempat animasi akan dipasang. 
• Pilih Custom HTML block di editor Gutenberg dan tempelkan kode HTML yang telah kamu salin.

Langkah 4: Menambahkan JavaScript untuk Animasi
Untuk membuat animasi Lottie bekerja dengan baik, kamu perlu menambahkan Lottie Player JavaScript. 

• Buka halaman LottieFiles, salin tag <script> yang disediakan di bagian bawah halaman animasi. 
• Gunakan plugin Simple Custom CSS and JS untuk menambahkan tag <script> ini ke website kamu.

Langkah 5: Sesuaikan Animasi

Dengan metode ini, kamu bisa menyesuaikan animasi lebih lanjut, seperti mengatur ukuran, kecepatan, dan efek transisi. Kode JavaScript memberi fleksibilitas lebih besar untuk kontrol penuh terhadap animasi.

Baca Juga: Minify CSS, HTML & JavaScript: Cara Dongkrak Performa Website

Tips Efektif Memasang Animasi di Website

Agar proses memasang animasi di website kamu lebih efektif, berikut beberapa tips yang bisa kamu terapkan:

• Setiap Animasi Harus Memiliki Tujuan Jelas
  Hindari menggunakan animasi hanya karena terlihat keren. Pastikan animasi memiliki tujuan tertentu, misalnya untuk menarik perhatian pada tombol atau memberikan petunjuk navigasi.
• Pertahankan Konsistensi
  Gunakan animasi yang sesuai dengan gaya desain dan identitas merek kamu. Konsistensi akan membuat pengalaman pengguna lebih lancar dan menyenangkan.
• Berikan Kontrol pada Pengguna
  Jika memungkinkan, beri pengunjung kontrol untuk mem-pause atau melewati animasi agar mereka merasa nyaman.
• Perhatikan Aksesibilitas
  Pastikan animasi dapat diakses oleh semua orang, termasuk mereka yang memiliki gangguan penglihatan atau sensitivitas terhadap gerakan. Menyediakan opsi untuk mematikan animasi bisa meningkatkan pengalaman pengguna.

Baca Juga: 3 Alat Terbaik UI/UX Designer: From Zero to Hero Desain Web

Kesimpulan

Memasang animasi Lottie di website kamu bisa memberi nilai tambah yang signifikan, baik untuk pengalaman pengguna maupun identitas merek. 

Dengan ukuran file yang kecil dan kemampuan untuk disesuaikan, animasi Lottie adalah pilihan ideal untuk membuat website kamu lebih interaktif dan menarik. 

Jika kamu ingin mengembangkan website yang memuat file animasi Lottie ke skala yang lebih besar, layanan VPS Murah dari IDwebhost dapat menjadi solusi yang tepat. 

Server VPS kami memiliki fitur yang mendukung kebutuhan tersebut karena menyediakan sumber daya server yang lebih besar, kontrol penuh atas konfigurasi hosting, dan kecepatan yang optimal. 

Selain itu, jika kamu membutuhkan bantuan dalam mendesain atau mengembangkan website profesional, IDwebhost juga menawarkan Jasa Pembuatan Website dengan kualitas terbaik. 

Dengan layanan Jasa Pembuatan Website yang didukung VPS Murah dari IDwebhost, website kamu akan tetap cepat dan stabil meski menampilkan berbagai animasi menarik!