LUXEE HELPS
Animasi Terlihat Kaku & Kasar? Ini Cara Setting Elementor Motion Effects!
📌 Apa itu Elementor Motion Effects?
Elementor Motion Effects adalah serangkaian fitur bawaan Elementor yang memungkinkan Anda memberikan efek animasi interaktif dinamis yang mendeteksi guliran layar (*Scroll Effects*) maupun sensor gerakan kursor/ponsel (*Mouse Effects*) pada setiap widget visual undangan Anda.
Anda ingin ornamen bingkai pernikahan meluncur dari bawah dengan perlahan, lalu bergeser ke kiri secara halus saat tamu menggulir layar HP mereka. Jika Anda menggunakan animasi CSS standar, ornamen tersebut akan bergerak kaku dengan kecepatan tetap yang tidak responsif. Dengan memanfaatkan **Elementor Motion Effects** (khususnya *Vertical Scroll* dan *Horizontal Scroll*), gerakan bingkai tersebut akan terasa sangat mulus dan menyatu sempurna dengan guliran jari tamu.
✨ Fitur Unggulan Motion Effects
- Scroll Effects Komprehensif: Mendukung pergeseran vertikal, horizontal, rotasi, pembesaran skala, hingga transisi transparansi.
- Mouse & Gyroscope Track: Elemen visual dapat bergerak halus mengikuti gerakan kursor di PC atau kemiringan sensor *gyroscope* ponsel tamu.
- Transisi Halus (Smoothness): Tingkat kehalusan respons gerakan dapat diatur kustom agar transisi visual ornamen terlihat estetik.
🛠️ Langkah Mengonfigurasi Motion Effects
Langkah 1: Menyeleksi Widget Target
Buka editor Elementor, klik widget gambar ornamen atau teks yang ingin Anda beri efek gerakan dinamis.
Langkah 2: Mengaktifkan Efek Gulir (Scroll Effects)
Pada panel sebelah kiri, beralihlah ke tab **Advanced > Motion Effects**. Klik tombol saklar **Scroll Effects** ke posisi **Active** (Aktif).
Langkah 3: Menyetel Arah Gerakan & Kecepatan
Klik ikon pensil di sebelah opsi **Vertical Scroll** atau **Horizontal Scroll**. Atur arah gerakan (**Direction**) (misal: *Up* atau *Down*) dan tentukan nilai kecepatan (**Speed**) ornamen Anda sesuai sistem pola kedalaman.
Langkah 4: Menonton Video Tutorial Detail
Tonton demonstrasi visual lengkap cara menyusun efek gerak 3D, menyetel batas respons layar (*viewport*), serta cara menguji fungsionalitas di sini:
Untuk memastikan gerakan animasi ornamen tidak terpotong di layar HP, atur nilai **Viewport** Anda di rentang **Bottom: 0%** dan **Top: 100%**. Ini menjamin efek gerakan dinamis ornamen akan terus dieksekusi secara mulus mulai saat widget baru terlihat di bawah layar hingga menghilang di atas layar.
🔗 Modul Panduan Terkait
Langkah berikutnya untuk menghidupkan animasi ornamen:
💡 Pertanyaan Sering Ditanya (FAQ)
Fitur **Motion Effects** bawaan adalah fitur eksklusif. Namun jangan khawatir, dengan menggunakan template **Luxee Parallax Volume 01**, struktur gerakan dinamis ini sudah tertanam secara arsitektur di dalam JSON dan tetap bekerja meskipun Anda hanya menggunakan Elementor versi gratis.
Pada pengaturan menu **Advanced > Motion Effects**, klik pada kolom opsi **Apply On** dan silakan hilangkan tanda centang pada pilihan **Mobile** jika Anda ingin animasi tidak berjalan pada perangkat ponsel pintar.
Sangat ramah. Efek gerakan Motion Effects Elementor dieksekusi menggunakan CSS3 dan Javascript modern yang ringan, sehingga konten teks utama di dalam halaman undangan tetap dapat dirayapi (*crawling*) dengan sempurna oleh mesin pencari.