Built Web

Web Development

AOS Settings

Pengaturan AOS Animation (Animate On Scroll)

Fitur AOS (Animate On Scroll) memungkinkan Anda menambahkan efek animasi transisi yang halus dan modern pada elemen web Anda saat pengunjung melakukan gulir (scroll) halaman ke bawah. Efek ini sangat berguna untuk membuat tampilan halaman arahan (landing page) atau beranda Anda menjadi lebih interaktif dan premium.

Cara Mengaktifkan Animasi pada Block

Sama seperti fitur Smart Header, pengaturan AOS terintegrasi langsung di dalam Block Editor (Gutenberg) sehingga Anda tidak memerlukan plugin animasi tambahan.

  1. Buka halaman yang ingin Anda edit menggunakan Block Editor.
  2. Klik/pilih elemen atau blok yang ingin Anda berikan animasi (misalnya: Container, Headline, Gambar, atau Tombol).
  3. Pastikan Sidebar Kanan aktif. Jika tidak muncul, klik ikon Roda Gigi/Settings di pojok kanan atas dasbor.
  4. Pada tab pengaturan blok (ikon roda gigi), cari dan klik panel AOS Animation untuk membukanya.

Penjelasan Menu Pengaturan AOS

Di dalam panel AOS Animation, Anda akan menemukan beberapa kontrol berikut yang dapat disesuaikan:

1. Animation Type (Tipe Animasi)

Pilih jenis gerakan atau transisi yang ingin Anda terapkan pada blok tersebut.

  • Contoh pilihan populer: Zoom In (seperti pada gambar), Fade Up, Slide Left, dan sebagainya.

2. Delay (MS)

Mengatur waktu jeda (dalam satuan milidetik/ms) sebelum animasi mulai berjalan sejak elemen tersebut muncul di layar.

  • Nilai bawaan: 300 ms (0.3 detik).
  • Tips: Gunakan slider atau ketik langsung angka jeda yang Anda inginkan pada kotak di sebelah kanan slider.

3. Duration (MS)

Mengatur kecepatan atau durasi berlangsungnya animasi dari awal hingga selesai (dalam satuan milidetik/ms).

  • Nilai bawaan: 1000 ms (1 detik). Semakin besar angkanya, maka gerakan animasi akan semakin lambat dan halus.

4. Animasi Hanya Sekali? (Toggle Switch)

Menentukan apakah animasi akan terus dipicu ulang setiap kali halaman digulir naik-turun, atau hanya sekali saja.

  • Aktif (On): Animasi hanya akan berjalan satu kali saat pertama kali pengunjung menggulir layar ke arah elemen tersebut. Sangat direkomendasikan agar tidak mengganggu fokus pembaca saat mereka menggulir kembali ke atas.
  • Nonaktif (Off): Animasi akan terpicu ulang setiap kali elemen masuk ke dalam layar pengguna.

Tips Praktis Menggunakan AOS (Cascading Effect)

Untuk membuat tata letak grid multi-kolom (misalnya 3 kolom fitur) terlihat sangat profesional, Anda bisa menggunakan teknik Cascading Effect (efek air terjun) memanfaatkan fitur Delay:

  • Kolom 1: Set Tipe: Zoom In, Jeda (Delay): 100 ms
  • Kolom 2: Set Tipe: Zoom In, Jeda (Delay): 300 ms
  • Kolom 3: Set Tipe: Zoom In, Jeda (Delay): 500 ms

Saat pengunjung menggulir layar ke area tersebut, ketiga kolom akan muncul secara berurutan dari kiri ke kanan dengan sangat halus dan elegan.

Catatan Penting: > Gunakan animasi secukupnya. Memasang terlalu banyak animasi dengan durasi yang terlalu lambat di satu halaman yang sama dapat mengganggu kenyamanan pengguna saat membaca konten Anda dan berpotensi memengaruhi kinerja rendering halaman di perangkat mobile yang lebih lama.