Dokumen ini disusun untuk mengatasi kesulitan pengguna Framer domestik yang mengalami kekurangan materi dalam bahasa Indonesia, dengan menerjemahkan konten dari blog resmi dan menambahkan informasi berguna untuk praktik. Kami berharap ini dapat sedikit membantu Anda dalam menggunakan FramerFramer.

Shimmer adalah perangkat visual yang sering digunakan untuk menunjukkan status pemuatan atau efek penekanan. Dengan sinar lampu tipis yang bergerak lembut dan berkilau di layar, pengguna dapat merasakan kesan 'antarmuka yang hidup'. Tutorial ini akan menunjukkan bagaimana menggunakan FramerFramer untuk membuat efek Shimmer pada situs web Anda.

Berlangganan saluran YouTube FramerFramer

Membuat Efek Shimmer di FramerFramer

Langkah 1: Siapkan Tata Letak Dasar

1. Tambahkan lapisan Shimmer untuk menampilkan kilauan.

   • Ukuran: tinggi 1px, lebar 100px

   • Posisi: kiri atas dari jendela aplikasi

   • Isi: Gradien Linear (kiri → kanan, putih 60% → putih 0%)

Langkah 2: Terapkan Efek Loop pada Lapisan Shimmer

1. Pilih lapisan Shimmer, kemudian tambahkan Effect → Loop.

2. Pengaturan:

   • Delay: 3 detik (menunggu 3 detik setiap animasi berakhir)

   • Skala: 1

   • Rotasi: 0

   • Nilai X: 800px (bergerak ke kanan)

   • Opacity: 0 (menghilang saat bergerak)

   • Jenis Transisi: Ease Out (cepat di awal kemudian melambat saat selesai)

   • Durasi: 1.5 detik

Sekarang lapisan Shimmer akan bergerak dengan lembut ke kanan dan menghilang setiap 3 detik.

Langkah 3: Tambahkan Shimmer Sebelah Kanan

Tambahkan efek Shimmer secara vertikal seperti situs web Linear.

1. Buat lapisan Shimmer kedua.

   • Ukuran: lebar 1px, tinggi 100px

   • Posisi: kanan atas dari jendela aplikasi

   • Isi: Terapkan Gradien Linear yang sama

2. Tambahkan Efek Loop dengan cara yang sama.

   • Delay: 2 detik (atur agar tidak bersamaan dengan Shimmer pertama)

   • Nilai Y: sekitar 670px (bergerak ke bawah)

   • Opacity: 0

   • Jenis Transisi: Ease Out

   • Durasi: 1.5 detik

Sekarang buka proyek di browser setelah di Publish. Anda dapat melihat dua lapisan yang bersilangan membuat efek berkilau.

Kesimpulan

Menambahkan efek berkilau pada situs web dapat menjadi cara yang menyenangkan dan mudah untuk menambahkan ketertarikan visual pada halaman. Dengan FramerFramer, Anda dapat menciptakan efek ini tanpa perlu menulis kode. Ikuti langkah-langkah di tutorial ini untuk menambahkan efek berkilau ke situs web Anda dan menarik perhatian pengunjung.

Lihat proyek efek dan remix→

Artikel ini adalah terjemahan dan adaptasi dari konten di blog resmi FramerFramer, ‘Advanced animation techniques: strategic shimmer effects for professional UX’.