Ulasan Animator: Plugin Animasi WordPress Point-and-Click (Bebas Kode)

Ingin menambahkan gulir yang menarik dan animasi berbasis waktu ke situs WordPress Anda?

Jika Anda seorang ahli CSS, Anda dapat mengatur sendiri animasi ini. Tapi bagi kita semua, WordPress tidak menawarkan cara mudah untuk menambahkan animasi ke konten.

Animator adalah plugin mandiri baru dari tim CSS Hero yang mengubahnya, memberi Anda akses ke antarmuka tunjuk-dan-klik yang sederhana untuk mengatur semua jenis animasi yang berbeda di situs WordPress Anda, apakah Anda menggunakan editor asli atau plugin pembuat halaman.

Jika Anda bukan orang teknis, ini memberi Anda kemampuan untuk tetap menyiapkan animasi di situs Anda. Dan bahkan jika Anda mampu menulis CSS Anda sendiri, Animator masih dapat mempercepat alur kerja Anda dengan antarmukanya.

Dalam ulasan Animator langsung kami, kami akan melihat lebih dalam apa yang ditawarkan plugin ini dan menunjukkan kepada Anda bagaimana menggunakannya untuk mengatur animasi WordPress.

Ulasan Animator: Apa yang Ditawarkan Plugin?

Manfaat tingkat tinggi dari Animator adalah memungkinkan Anda menambahkan banyak animasi berbeda ke situs Anda tanpa memerlukan CSS, JS, atau pengetahuan teknis mendalam lainnya.

Sebagai gantinya, Anda dapat melakukan semuanya dari antarmuka tunjuk-dan-klik, lengkap dengan garis waktu animasi untuk membantu Anda mengontrol animasi.

Animator berasal dari tim yang sama dengan plugin CSS Hero yang populer, jika Anda sudah familiar dengan itu. Singkatnya, Animator adalah animasi seperti halnya CSS Hero untuk gaya CSS umum.

Mari telusuri beberapa fitur terbesar dengan sedikit lebih detail.

Antarmuka Titik-dan-Klik

Untuk membantu Anda mengelola animasi, Animator menawarkan antarmuka tunjuk-dan-klik yang sederhana.

Ada dua bagian utama:

1. Pratinjau visual lebar penuh situs Anda – saat Anda menambahkan animasi, Anda dapat langsung melihat seperti apa tampilannya di pratinjau langsung. Ini sangat berguna sehingga Anda dapat melakukan sedikit penyesuaian tanpa harus terus-menerus memuat ulang pratinjau terpisah.
2. Garis waktu animasi – Anda dapat menggunakan garis waktu untuk menyiapkan satu atau beberapa animasi berdasarkan perilaku atau waktu pengguliran pengguna. Anda dapat menyeret berbagai hal dan menyesuaikan pengaturan untuk mendapatkan efek yang sempurna.

Anda akan mendapatkan tampilan yang jauh lebih mendetail pada antarmuka ini di bagian praktis…tetapi secara keseluruhan, ini sangat mudah digunakan.

3+ Mode Animasi Tingkat Tinggi Dengan Banyak Properti Animasi

Untuk membantu Anda menyiapkan animasi, Animator menawarkan tiga mode tingkat tinggi:

• Paralaks – animasi “tween” berdasarkan posisi persentase elemen di viewport. Tween adalah kependekan dari inbetween – ide dasarnya di sini adalah memungkinkan Anda membuat efek gulir paralaks.
• Gulir – memicu gaya atau animasi CSS tertentu setelah pengguna menggulir sejumlah piksel tertentu. Misalnya, Anda dapat menerapkan gaya khusus negara bagian ke header saat pengguna menggulir halaman ke bawah.
• Berwaktu – membuat animasi berbasis waktu yang terjadi pada jadwal yang ditetapkan. Misalnya, menambahkan animasi float ke elemen untuk membuatnya menonjol.

Berikut adalah beberapa contoh umum dari Animator yang menampilkan berbagai mode animasi:

Di luar mode animasi tingkat tinggi, Anda juga memiliki kemampuan untuk menganimasikan sejumlah besar properti CSS, termasuk yang berikut:

• Warna latar belakang
• Posisi latar belakang
• Bayangan kotak
• Ukuran huruf
• Spasi huruf
• Kegelapan
• Perspektif
• Putar X, Y, atau Z
• Skala
• Miringkan X atau Y
• Lebar
• …banyak lagi

Untuk menyederhanakan banyak hal, Animator menyertakan banyak preset untuk ini:

Namun, Anda juga memiliki opsi untuk membuat animasi Anda sendiri, yang memungkinkan Anda melampaui prasetel tersebut jika diperlukan.

Bekerja Dengan Editor Asli, Tema, dan Pembuat Halaman

Selain bekerja dengan editor WordPress asli, Animator juga bekerja dengan tema pihak ketiga dan plugin pembuat halaman.

Ini termasuk, namun tidak terbatas pada, alat-alat berikut:

• Elementor
• Pembuat Berang-berang
• Divi
• Pembuat Halaman WPBakery
• Avada
• Astra
• Oksigen

Pada dasarnya, Animator harus bekerja pada elemen apa pun di situs Anda, dari mana pun asal elemen tersebut.

Misalnya, mungkin Anda menyukai Beaver Builder untuk desain, tetapi Anda merasa opsi animasi Beaver Builder terlalu terbatas untuk kebutuhan Anda.

Dengan menginstal Animator bersama Beaver Builder, Anda akan mendapatkan kemampuan untuk menambahkan animasi yang lebih canggih ke desain Beaver Builder Anda.

Edit atau Ekspor Animasi Secara Manual (Untuk Pengguna Lebih Lanjut)

Sementara Animator dibangun agar pengguna non-teknis dapat membuat animasi menggunakan antarmuka tunjuk-dan-klik, pengguna yang lebih mahir mungkin menghargai bahwa Animator masih memberi Anda akses ke kode yang mendasarinya jika Anda ingin mengedit secara langsung.

Anda juga dapat mengekspor data aplikasi jika diperlukan.

Plugin Sepenuhnya Mandiri

Meskipun Animator berasal dari tim Pahlawan CSS, Anda tidak perlu menginstal Pahlawan CSS untuk menggunakan Animator.

Artinya, Animator adalah plugin yang sepenuhnya berdiri sendiri.

Dengan demikian, Animator akan tetap bermain bagus dengan CSS Hero, jadi Anda benar-benar bebas menggunakan keduanya jika ingin mengontrol gaya situs tanpa kode.

Cara Membuat Animasi WordPress Menggunakan Plugin Animator

Sekarang setelah Anda memahami apa yang ditawarkan Animator, mari gali bagaimana rasanya menggunakan Animator di situs Anda.

Di bawah ini, saya akan menunjukkan kepada Anda langkah demi langkah cara menyiapkan animasi WordPress menggunakan Animator dan situs demo yang saya buat dengan tema Astra dan editor bawaan WordPress.

1. Buka Antarmuka Animator di Halaman yang Ingin Anda Animasikan

Untuk memulai, Anda ingin membuka antarmuka Animator di halaman yang berisi konten yang ingin Anda animasikan.

Jika Anda ingin menganimasikan elemen di seluruh situs ( seperti tajuk Anda ), Anda cukup membuka laman mana saja yang menyertakan tajuk Anda. Setiap animasi yang Anda siapkan akan secara otomatis diterapkan ke semua instance dari header tersebut.

Untuk meluncurkan antarmuka Animator, Anda hanya perlu mengklik opsi Hero Animator di bilah alat WordPress sambil melihat halaman yang relevan.

2. Pilih Elemen yang Ingin Anda Animasikan

Setelah Anda membuka antarmuka Animator, Anda akan melihat pratinjau visual halaman Anda, bersama dengan antarmuka Animator di bagian bawah.

Untuk memulai, Anda ingin memilih elemen untuk dianimasikan dengan mengekliknya di pratinjau langsung.

Saat Anda mengarahkan kursor ke pratinjau langsung, Animator akan menampilkan beberapa informasi tambahan tentang setiap elemen, yang membantu Anda memilih elemen yang tepat.

Misalnya, untuk menganimasikan gambar dalam desain pengujian saya, saya hanya perlu memilihnya:

Anda juga dapat memasukkan kelas atau ID CSS secara manual, yang mungkin diperlukan untuk beberapa gambar latar belakang.

Misalnya, saya kesulitan menggunakan pendekatan tunjuk-dan-klik untuk memilih gambar pahlawan di situs pengujian saya. Tampaknya ada sesuatu dengan cara situs demo Astra menyetel gambar sebagai latar belakang wadah di blok Wadah khusus, karena saya tidak mengalami masalah menggunakan tunjuk dan klik untuk memilih gambar lain.

3. Pilih Mode Animasi Anda

Setelah Anda memilih elemen untuk dianimasikan, Anda ingin memilih mode animasi dengan menggunakan kotak Relative to .

Sekali lagi, Anda memiliki tiga opsi:

1. Tinggi Area Pandang (paralaks AKA)
2. Piksel yang Digulir
3. Waktu

Anda pada dasarnya membuat pernyataan deklaratif - misalnya "Saya ingin menganimasikan [elemen ini] relatif terhadap [mode animasi ini]".

Untuk contoh ini, saya telah menyiapkannya sehingga saya menganimasikan gambar situs saya relatif terhadap penghitung waktu berulang.

Catatan – Anda dapat menambahkan beberapa jenis animasi ke satu elemen. Misalnya, Anda dapat menambahkan animasi berbasis waktu dan animasi paralaks (tinggi viewport).

4. Atur Animasi Anda Menggunakan Timeline

Sekarang setelah Anda memilih apa yang akan Anda animasikan, Anda siap untuk benar-benar mengatur animasi Anda menggunakan garis waktu.

Untuk melakukannya, klik ikon plus untuk Menambahkan Animasi :

Ini akan membuka sembulan yang berisi berbagai jenis animasi yang dapat Anda gunakan dengan mode animasi tersebut.

Misalnya, untuk animasi berbasis waktu, beberapa opsi prasetel meliputi berikut ini:

• Melambung
• Jatuh
• Mengambang
• Ruang huruf kabur
• Tenda
• Pulsa bayangan
• Kecilkan lompatan
• Putaran sederhana

Anda dapat melihat pratinjau animasi seperti apa animasi itu, yang sangat bagus untuk memilih animasi yang tepat.

Jika Anda ingin membuat jenis animasi lain yang tidak ada dalam daftar prasetel, Anda juga dapat membuat jenis animasi Anda sendiri.

Saat Anda memilih animasi, itu akan muncul di timeline. Animasi juga akan berlaku untuk pratinjau langsung, sehingga Anda dapat melihat dengan tepat seperti apa tampilannya di situs Anda.

Untuk animasi berbasis waktu, Anda akan melihat garis muncul saat bergerak melalui bilah garis waktu saat animasi selesai, yang sangat berguna.

Jika Anda ingin membuat animasi lebih panjang atau lebih pendek, Anda cukup menyeret bilah di timeline.

Anda juga dapat mengklik ikon tiga titik untuk mengakses pengaturan lebih lanjut, seperti apakah animasi akan diulang atau tidak (dan jika ya, untuk berapa lama).

Jika Anda ingin menambahkan beberapa animasi, Anda dapat mengulangi langkah-langkah untuk menambahkan animasi yang berbeda.

Anda kemudian dapat mengatur animasi tersebut pada garis waktu untuk mencapai efek yang Anda inginkan.

Pastikan untuk mematikan perulangan tak terbatas jika Anda ingin menggunakan beberapa animasi berbasis waktu.

Anda juga tidak terbatas untuk membuat jenis animasi yang sama. Misalnya, secara teknis Anda dapat menambahkan animasi berbasis waktu dan gulir ke elemen yang sama.

Untuk elemen gulir paralaks, Animator juga memungkinkan Anda mengontrol LERP (Interpolasi linier) untuk memuluskan perilaku gulir elemen.

Untuk menyesuaikan ini, Anda dapat menggunakan drop-down Lerp di sisi kiri antarmuka.

5. Publikasikan Animasi Anda

Saat Anda puas dengan animasi Anda, yang perlu Anda lakukan hanyalah mengeklik tombol Simpan untuk membuatnya aktif di situs Anda.

Ada juga opsi praktis yang memungkinkan Anda memilih apakah akan menerbitkan animasi Anda atau tidak ke versi seluler situs Anda.

Menjelajahi Beberapa Mode Animasi Lainnya

Mode animasi yang berbeda akan memiliki antarmuka yang sedikit berbeda pada timeline.

Misalnya, jika Anda memilih animasi Viewport Height, garis waktu akan berubah dari detik menjadi persentase tinggi viewport relatif.

Misalnya, Anda dapat melihat bahwa ini dimulai dari 150% dan berlanjut hingga -50%.

Jika Anda menganimasikan sesuatu seperti warna latar belakang, Anda dapat memilih warna berbeda berdasarkan kedalaman gulir relatif:

Untuk animasi Piksel Tergulir, Anda akan melihat jumlah piksel tertentu, bukan persentase relatif.

Misalnya, jika Anda menyetel langkah animasi pada 600 piksel, animasi akan terjadi saat pengguna menggulir tepat 600 piksel.

Cara Langsung Mengedit, Mengekspor, atau Memanipulasi Kode Anda

Untuk pengguna yang lebih mahir, Animator juga memungkinkan Anda melihat data JSON mentah dari animasi Anda. Anda dapat menggunakan ini untuk mengedit ulang animasi Anda, atau menyalin/menempelkannya ke file teks untuk mendapatkan gambaran lengkap dari animasi saat ini.

Ada juga panel Operasi , yang ditujukan untuk pengguna yang lebih teknis, yang memungkinkan Anda secara terprogram memanipulasi data objek JSON dari plugin dengan menambahkan kode javascript Anda sendiri. Saya bukan pengembang jadi saya tidak sepenuhnya yakin dengan peluang apa yang ditambahkan ini, tetapi saya membayangkan pengembang akan menghargai tingkat kontrol ini.

Anda dapat mengakses opsi ini dengan mengeklik ikon tiga titik di sebelah tombol Simpan dan memilih Ekspor Data .

Harga Animator

Animator hanya hadir dalam versi premium, tetapi harganya terjangkau untuk apa yang ditawarkannya.

Dengan harga normal, Anda akan dikenakan biaya $49 untuk penggunaan di situs tanpa batas dan dukungan serta pembaruan selama satu tahun.

Namun, untuk merayakan peluncurannya, harga plugin saat ini hanya $29 pada saat kami menulis ulasan plugin Animator kami.

Jika Anda membelinya dengan harga $29 ini, Anda dapat mengunci harga tersebut untuk perpanjangan jika Anda ingin terus menerima dukungan dan pembaruan setelah tahun pertama.

Jika Anda ingin menguji plugin sebelum melakukan pembelian, Animator memungkinkan Anda menjalankan demo antarmuka animasi yang berfungsi penuh. Anda dapat mengaksesnya di halaman ini atau dengan mengklik tombol Coba demo di beranda Animator.

Ada juga jaminan uang kembali 30 hari, sehingga Anda dapat mengujinya di situs Anda sendiri tanpa risiko terhadap dompet Anda.

Pikiran Akhir tentang Animator

Secara keseluruhan, Animator memenuhi janjinya untuk menawarkan animasi tunjuk-dan-klik yang mudah.

Saya jelas bukan seorang pengembang, tetapi saya bisa bangkit dan berlari dengan sangat cepat.

Antarmuka berbasis garis waktu memudahkan untuk mengatur animasi Anda dan mengelola pengaturannya. Ini juga sangat membantu untuk dapat langsung melihat seperti apa animasi tersebut pada pratinjau visual, tanpa perlu me-refresh halaman.

Sementara Animator cukup sederhana untuk pengguna non-teknis, menurut saya pengguna tingkat lanjut mungkin masih mendapat manfaat hanya karena dapat mempercepat. Jadi meskipun Anda mampu menulis CSS sendiri, Anda mungkin masih lebih suka menggunakan Animator untuk menghemat waktu.

Jika Anda ingin mencoba Animator sendiri, Anda dapat menggunakan tombol di bawah untuk memulai: