Dalam tutorial kali ini, kita akan melihat bagaimana menggunakan Framer untuk membuat efek gulir yang menarik. Efek ini banyak diminta di komunitas FramerFramer dan dapat sering ditemukan di situs populer seperti Apple. Halaman Apple TV Plus adalah contoh yang baik, menunjukkan aliran di mana satu bagian secara bertahap mengecil menjadi tayangan slide saat Anda menggulir.

Berlanggananlah ke saluran YouTube

Mempersiapkan Demo

Untuk tutorial kali ini, sebagai pengganti gambar, kami telah menyiapkan demo yang menerapkan efek yang sama dengan menggunakan video. Saat Anda menggulir ke bawah, video akan secara bertahap mengecil dan berubah menjadi tayangan slide, yang secara alami berlanjut ke bagian berikutnya ketika skala selesai. Setelah Anda mengklik item berikutnya di tayangan slide dan menggulir ke atas, video akan membesar kembali ke keadaan aslinya.

Memulai dengan Framer

Mari kita mulai dengan membuka proyek FramerFramer dan membuat bagian penggulung yang cukup panjang. Dalam contoh ini, kami menetapkan tingginya sekitar 2800px, tetapi Anda bisa menyesuaikannya sesuai ritme dan panjang konten halaman Anda. Tinggi bagian ini menentukan seberapa jauh video harus digulung agar skala mengecil.

Selanjutnya, di dalam bagian penggulung, tambahkan satu bingkai lagi, lalu atur ukurannya menjadi Width: 100%, Height: 100vh. Ubah nama bingkai ini menjadi ‘slideshow container’ dan tetapkan Position: Sticky sehingga area ini tetap di bagian atas saat Anda menggulir halaman. Terakhir, aktifkan Layout bingkai dan biarkan pada nilai default agar tata letak lebih stabil.

Menambahkan Tayangan Slide

Sekarang, ambil tayangan slide dari menu Insert dalam bagian Interactive dan tambahkan ke proyek. Ukuran tayangan slide adalah Height: 100%, dan atur Width: menjadi sekitar 1900px sesuai rasio aspek video, serta aktifkan Lock Aspect Ratio untuk menjaga proporsi. Jangan lupa tetapkan Min-width: 110% untuk selalu memenuhi lebar layar. Selanjutnya, hubungkan video ke tayangan slide menggunakan konektor multipin. Sekarang saatnya menerapkan efek transformasi gulir. Pilih tayangan slide, masuk ke Effects di panel atribut, tambahkan Scroll Transform, tentukan Section in View sebagai kriteria, dan tetapkan bagian video yang telah dibuat sebelumnya.

Memperbaiki Tayangan Slide

Perbaiki atribut tayangan slide agar sesuai dengan proyek Anda. Misalnya, atur Interval ke 5 detik agar video tetap di layar lebih lama dan dapat dinikmati lebih stabil sebelum berpindah ke item berikutnya. Dalam contoh ini, kita tidak memerlukan Dots penanda di bawah, jadi nonaktifkan, dan berikan jarak antar slide sekitar 50px untuk transisi yang lebih jelas. Tingkatkan ukuran panah untuk meningkatkan navigasi.

Atur Clipping > Overflow: Show agar video lain sedikit terlihat di tepi untuk visibilitas lebih tinggi. Tambahkan juga Scroll Transform ke lapisan teks agar Opacity berkurang perlahan saat menggulir sehingga fokus pemirsa secara alami beralih ke video dan transisi slide, menghasilkan aliran yang lebih halus.

Menambahkan Komponen Ticker

Untuk membuat kesan bagian berikutnya lebih baik, tambahkan komponen Ticker dari Insert > Interactive. Gandakan Ticker ini untuk membuat tiga baris dan hubungkan setiap baris ke gambar. Sesuaikan Gap dan Speed secara tepat dan tetapkan Direction berbeda untuk setiap baris, sehingga arah gulirnya berbeda, memberikan ritme pada layar dan memperkaya bagian acara setelah transisi.

Hasil Akhir

Hasil akhirnya adalah efek gulir yang mulus di mana layar mengecil dan beralih menjadi tayangan slide saat Anda menggulir. Hasil akhirnya akan memberikan perasaan mirip dengan yang terlihat di situs web Apple.

Lihat dan coba efeknya→

Artikel ini adalah konten yang diterjemahkan dan diadaptasi dari blog resmi Framer, ‘Creating a cool scrolling effect like Apple with Framer’.