LUXEE HELPS
Bosan dengan Animasi Standar? Ini Panduan Lengkap Menggunakan Pola Animation Library Luxee v2!
📌 Apa itu Luxee Animation Library v2?
Luxee Animation Library v2 adalah perpustakaan efek animasi terintegrasi bawaan engine v2 yang berisi preset animasi gerakan mikro (micro-interactions) siap pakai. Fitur ini memungkinkan ornamen undangan seperti bunga, daun, kupu-kupu, cincin, dan awan bergerak melayang, memutar, atau bergoyang secara lembut tanpa memerlukan baris kode CSS tambahan.
Anda ingin ornamen kupu-kupu pada undangan berayun mengepakkan sayapnya secara terus-menerus (infinite looping), dan ornamen daun di pojok layar bergoyang pelan tertiup angin. Menggunakan fitur entrance animation bawaan Elementor standar hanya akan memicu gerakan sekali saat halaman dimuat. Dengan memanfaatkan preset khusus di **Luxee Animation Library v2**, Anda dapat menghidupkan ornamen visual tersebut dengan gerakan mengayun lembut tanpa henti sehingga tampak memukau.
✨ Jenis Preset Gerak di Animation Library v2
- Goyang Animasi (Goyangan Halus / Swaying): Sangat cocok untuk ornamen dedaunan, tanaman rambat, rumbai tirai, dan lentera gantung.
- Melayang Lembut (Floating / Floating 3D): Preset terbaik untuk kelopak bunga, awan, balon, cincin pernikahan, dan objek melayang bebas.
- Rotasi Lambat (Slow Rotate / Spin): Ideal digunakan pada ornamen kompas mawar, piringan piring hitam pemutar lagu, roda gerigi, dan mandala mistik.
🛠️ Langkah Menggunakan Animation Library v2
Langkah 1: Menyeleksi Objek / Ornamen Desain
Buka editor Elementor Anda, klik pada widget Gambar (Image) ornamen ornamen dekoratif yang ingin diberi efek gerakan tanpa henti.
Langkah 2: Membuka Menu Luxee Animation Library
Di panel konfigurasi sebelah kiri Elementor, masuk ke tab **Advanced**, lalu cari bagian tab menu khusus **Luxee Animation Library** dan ubah saklar pengaktifan ke posisi **ON**.
Langkah 3: Memilih Preset & Kecepatan (Duration)
Pada pilihan menu drop-down *Animation Preset*, pilih gerakan yang Anda inginkan (misal: **Floating Gentle**). Pada bagian *Animation Duration*, geser slider atau masukkan nilai kecepatan (misal: **4s** untuk durasi gerak 4 detik).
Langkah 4: Menata Arah & Jarak Gerakan (Offset)
Sesuaikan nilai *Translation / Offset* untuk membatasi jarak pergeseran ornamen Anda agar gerakan tidak terlalu melebar dan tetap berada pada posisi aman yang estetis.
Langkah 5: Menonton Video Panduan Praktik Preset
Saksikan demonstrasi visual lengkap cara menyetel preset, menggabungkan animasi giroskop dengan preset looping, serta membuat gerakan natural di video berikut:
Untuk menciptakan kesan dedaunan bergoyang tertiup angin yang sangat alami, gunakan ornamen gambar daun yang berbeda lalu setel nilai **Animation Delay** yang berbeda pula (misalnya daun kiri delay 0.5 detik, daun kanan delay 1.2 detik). Hal ini akan mencegah ornamen bergerak secara seragam layaknya robot.
🔗 Modul Panduan Terkait
Langkah penting berikutnya yang harus dikerjakan setelah menyetel preset:
💡 Pertanyaan Sering Ditanya (FAQ)
Beberapa browser menonaktifkan simulasi CSS animation looping di dalam mode editing untuk menghemat daya. Coba klik tombol **Preview Changes** (ikon mata di kiri bawah) untuk melihat hasil pergerakan ornamen yang sesungguhnya pada tab pratinjau browser baru.
Satu widget gambar hanya bisa menggunakan satu preset *looping* aktif utama dari library. Namun, Anda bisa membungkus gambar tersebut di dalam Inner Section atau Container khusus, lalu menerapkan preset gerak kedua pada pembungkusnya (parent wrapper) untuk menghasilkan kombinasi gerakan.
Tidak perlu khawatir. Luxee Parallax v2 dikonfigurasi menggunakan teknik akselerasi perangkat keras (hardware acceleration CSS GPU `translate3d`), sehingga rendering gerakan berjalan sangat efisien dan mulus tanpa membebani prosesor smartphone.