Cara Menambahkan Animasi dan Efek Scroll di Elementor

Jenis Animasi di Elementor

Elementor menyediakan beberapa jenis animasi bawaan yang bisa membuat website terasa lebih hidup dan profesional tanpa perlu plugin tambahan.

Entrance Animation (Animasi Masuk)

Animasi yang muncul saat elemen masuk ke viewport pengunjung:

1. Pilih widget/section/kolom
2. Buka tab Advanced
3. Scroll ke bagian Motion Effects
4. Di Entrance Animation, pilih jenis animasi (Fade In, Slide Up, Zoom In, dll)
5. Atur Animation Duration (slow/normal/fast) dan Animation Delay

Scroll Effects (Paralax dan Efek Scroll)

Scroll Effects membuat elemen bergerak seiring scrolling pengunjung:

1. Pilih section atau widget
2. Tab Advanced → Motion Effects → Scrolling Effects: ON
3. Pilih efek: Vertical Scroll, Horizontal Scroll, Transparency, Blur, Rotate, Scale
4. Atur speed dan direction

Background Parallax

1. Pilih section dengan background gambar
2. Tab Style → Background → Background Attachment: Fixed
3. Efek parallax sederhana langsung aktif saat halaman di-scroll

Hover Effects

Efek saat mouse hover di atas elemen:

• Widget Image → Style → Hover → pilih efek (Zoom, Grayscale, Sepia, dll)
• Button → Style → Hover → ubah warna dan bayangan saat hover
• Gunakan CSS Transition di Advanced untuk kontrol lebih detail

Tips Penggunaan Animasi

• Jangan terlalu banyak animasi — maksimal 2-3 jenis per halaman
• Gunakan delay berurutan untuk elemen yang sejajar (0.1s, 0.2s, 0.3s)
• Test di mobile — animasi berat bisa memperlambat halaman
• Hindari animasi di above-the-fold untuk menjaga performa LCP