Memulai

Langkah pertama untuk membuat efek gelombang di Framer adalah menggambar bingkai. Tekan tombol F untuk membuka alat bingkai, dan Anda dapat menempatkan bingkai sesuai ukuran yang diinginkan. Dalam efek ini, ukuran bingkai tidak terlalu penting.

Selanjutnya, Anda perlu mengatur isian Linear pada bingkai. Pilih bingkai, lalu pilih Linear pada Fill di panel Properties, dan tetapkan warnanya menjadi #09F dan #0DF. Ini akan menerapkan gradasi yang segar.

Terakhir, Anda harus membuat sudut bingkai menjadi bulat. Dengan mengatur radius hingga 40%, Anda akan mendapatkan bentuk 'squircle' yang hampir bulat, yang merupakan dasar yang cocok untuk animasi gelombang.

Membuat Layer

Efek gelombang terdiri dari tiga layer total. Ubah posisi bingkai ke Absolute terlebih dahulu. Pilih Absolute pada Position di panel Properties. Kemudian, untuk memberikan tampilan besar pada efek gelombang, perluas ukuran horizontal dan vertikal layer hingga 4000 piksel.

Selanjutnya, gandakan layer ini dua kali untuk mempersiapkan total tiga layer. (gunakan pintasan Command + D) Sekarang Anda dapat melihat tiga layer berdampingan di panel Layers.

Terakhir, terapkan mode blending Multiply agar ketiga layer ini tercampur dengan alami. Pilih Multiply pada panel Style, dan efek bertumpuk akan menampilkan gelombang seperti ombak.

Menambahkan Animasi

Sekarang mari tambahkan gerakan ke layer. Pilih semua tiga layer dan terapkan animasi Loop di Effects panel Properties. Defaultnya, layer akan berputar 360 derajat, namun dengan mengatur kurvanya menjadi Linear, kecepatan akan tetap konsisten, memberikan kesan gelombang yang halus dan mengalir tanpa putus. Pengaturan penting lainnya adalah Pinning. Setelah memilih ketiga layer, pastikan untuk menonaktifkan pen pada sisi kiri, kanan, dan bawah agar gelombang tetap pada tempatnya meskipun ukuran halaman berubah.

Menambahkan Efek Appear

Menambahkan animasi kemunculan di sini dapat menghasilkan adegan yang lebih dinamis. Pilih kontainer gelombang dan terapkan efek Appear. Ketika Opacity diatur ke 1 dan nilai Y diatur ke -400, gelombang akan terlihat seperti turun dari atas layar. Tentukan transisi Ease Out dan waktu menjadi 5 detik, sehingga gelombang muncul dan mulai dengan lembut.

Menguji Berbagai Gaya

Keunggulan utama animasi gelombang adalah kemampuannya untuk berubah dengan berbagai cara. Misalnya, mengganti atau membalik warna layer akan menciptakan suasana gelombang yang sama sekali berbeda. Juga, jika menempatkan gelombang di bagian bawah halaman, Anda dapat menggunakannya sebagai latar belakang footer. Dengan kata lain, efek gelombang bukan sekadar dekorasi sederhana, tetapi alat ekspresi kuat yang dapat diubah bebas oleh desainer sesuai dengan nada merek mereka.

Lihat efek dan coba praktekan→

Artikel ini adalah konten hasil terjemahan dan adaptasi dari ‘Create a stunning wave animation in Framer with just three layers and zero code' dari blog resmi FramerFramer.