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 Framer untuk membuat efek Shimmer pada situs web Anda.

Berlangganan saluran YouTube Framer

Membuat Efek Shimmer di Framer

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 Framer, 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 Framer, ‘Advanced animation techniques: strategic shimmer effects for professional UX’.