Undangan Terlihat Kaku & Membosankan? Ini Cara Setting Script Animasi PedangPora!

📌 Apa itu Fitur Script Animasi?

Script Animasi pada template Luxee PedangPora adalah fitur efek transisi gulir (scroll-reveal) interaktif yang membuat elemen visual di undangan bergeser atau membesar secara perlahan saat halaman di-scroll oleh tamu. Fitur ini bekerja dengan menggunakan kombinasi skrip JavaScript terpadu dan penulisan nama kelas khusus pada kolom CSS Classes di Elementor.

✨ Kelebihan Fitur Script Animasi

• Transisi Halus (60 FPS): Menggunakan teknologi CSS hardware acceleration untuk pergerakan transisi yang bebas dari lag.
• Super Ringan: Dibuat menggunakan native JavaScript murni tanpa perlu menginstal plugin animasi WordPress pihak ketiga yang dapat memperlambat loading website.
• Penerapan Sangat Mudah: Cukup menempelkan nama kelas CSS di tab Advanced Elementor.

📋 Detail Perilaku & Cara Kerja Efek Animasi

Masing-masing kelas CSS dirancang dengan efek transisi, durasi waktu, dan arah gerakan yang berbeda. Berikut adalah penjelasan teknis detail dari cara kerja setiap animasi:

• muncul (Fade Up & Scale):
  • Cara Kerja: Elemen awalnya diposisikan bergeser ke bawah sejauh 6rem (~96 piksel), berukuran agak mengecil (skala 0.93), dan disembunyikan sepenuhnya (transparansi/opacity 0).
  • Efek Visual: Saat halaman digulir (scroll) dan elemen terdeteksi di viewport, elemen akan bergeser naik ke posisi semula, membesar secara bertahap ke skala normal (1), dan memudar tampil penuh (opacity 1).
  • Durasi Waktu: Efek pergeseran berlangsung selama 1 detik dan pemudaran opacity berlangsung selama 0.5 detik secara bersamaan.
• muncul-kiri (Fade In Left & Scale):
  • Cara Kerja: Elemen awalnya diposisikan tergeser jauh ke arah kiri layar sejauh -100% dari lebar posisinya, agak mengecil (skala 0.93), dan transparan (opacity 0).
  • Efek Visual: Saat terdeteksi scroll, elemen akan meluncur secara horizontal masuk ke arah kanan menuju posisi aslinya sembari membesar ke ukuran normal.
  • Durasi Waktu: Peluncuran elemen dari kiri berlangsung selama 1 detik dengan transisi pemudaran opacity selama 0.5 detik.
• muncul-kanan (Fade In Right & Scale):
  • Cara Kerja: Elemen awalnya diposisikan tergeser jauh ke arah kanan layar sejauh 100% dari posisinya, agak mengecil (skala 0.93), dan transparan (opacity 0).
  • Efek Visual: Elemen meluncur secara horizontal masuk ke arah kiri menuju posisi aslinya sembari membesar ke ukuran normal secara halus.
  • Durasi Waktu: Peluncuran dari kanan berlangsung selama 1 detik dan transisi opacity selama 0.5 detik.
• zoom (Fade In Zoom):
  • Cara Kerja: Elemen awalnya dikecilkan hingga setengah ukuran aslinya (skala 0.5) dan disembunyikan (opacity 0).
  • Efek Visual: Saat di-scroll, elemen akan membesar secara simetris dari titik tengahnya hingga mencapai ukuran normal (skala 1) secara perlahan dan halus.
  • Durasi Waktu: Transisi pembesaran (zoom) berlangsung selama 1.5 detik dengan efek transisi opacity selama 0.5 detik, memberikan kesan transisi yang dramatis dan sinematik.

---

🛠️ Cara Mengaktifkan & Menggunakan Script Animasi

Langkah 1: Memastikan Widget HTML "Script Animasi" Aktif

Buka editor Elementor pada halaman undangan Anda. Aktifkan panel Structure (Navigator) di sebelah kanan layar, kemudian gulir ke bagian paling bawah. Cari kontainer Code Is Here → Isi Konten → dan pastikan terdapat widget HTML bernama Script Animasi. Widget ini berfungsi sebagai pusat pengendali logika animasi di halaman tersebut.

Langkah 2: Memilih Elemen yang Ingin Dianimasikan

Klik pada widget atau elemen yang ingin Anda berikan animasi (misalnya: Widget Image Foto Mempelai, Heading Teks, atau tombol pembuka).

Langkah 3: Memasukkan Nama Kelas CSS Animasi

Pada panel pengaturan Elementor di sebelah kiri layar, lakukan langkah berikut:

1. Buka tab Advanced.
2. Cari kolom input bernama CSS Classes.
3. Ketikkan salah satu nama kelas animasi berikut (pilih salah satu sesuai kebutuhan efek visual): muncul, muncul-kiri, muncul-kanan, atau zoom.

---

💡 Studi Kasus: Penerapan Animasi pada Kontainer Mempelai

Untuk mempermudah pemahaman Anda, berikut adalah contoh nyata cara menerapkan animasi masuk dari kiri (muncul-kiri) pada kontainer foto dan detail Mempelai Wanita:

Langkah 1: Buka Kolom Mempelai Wanita di Navigator

Pada panel Structure (Navigator) Elementor di sebelah kanan layar, silakan telusuri folder seksi berikut:

Kanan → section-konten → Couple → Isi Konten → Container (induk kolom mempelai) → klik kontainer Container pertama (yang menampung foto, nama, dan detail Mempelai Wanita).

Langkah 2: Tambahkan CSS Class di Tab Advanced

Setelah kontainer Mempelai Wanita terpilih, buka panel pengaturan di sebelah kiri layar:

1. Klik tab Advanced (ikon roda gigi/setelan di atas).
2. Cari kolom input CSS Classes di bawah menu Layout.
3. Ketikkan kelas muncul-kiri pada kolom tersebut.

Dengan pengaturan di atas, saat tamu undangan melakukan scroll ke bagian biodata mempelai, seluruh kolom Mempelai Wanita (foto, nama, serta detail orang tua) akan meluncur masuk secara bersamaan dari sisi kiri layar dengan sangat anggun.