Langganan saluran Framer YouTube

Cara Membuat Grid Video Berputar

Langkah 1: Atur Halaman dan Bingkai Dasar

Buat halaman baru di Framer.

1. Tambahkan satu Frame (F) dan atur agar mengisi seluruh lebar.

   • Atur tinggi sekitar 1000px lalu ubah ke Height → Viewport untuk menyesuaikan tinggi layar penuh.

   • Hapus Fill.

2. Tambahkan bingkai persegi di dalam bingkai ini.

   • Atur ukurannya lebar=tinggi (dalam tutorial 970), dan rata tengah.

   • Hapus Fill.

   • Ubah namanya menjadi Container.

   • Kontainer ini akan menjadi area untuk grid video.

Langkah 2: Tata Letak Grid Video

1. Tempatkan video pertama di tengah kontainer.

   • Pastikan berada tepat di tengah.

2. Tempatkan video lainnya dalam bentuk grid.

   • Atur semua video agar masuk ke dalam kontainer.

Langkah 3: Terapkan Animasi Gulir ke Kontainer

Setelah grid siap, sekarang terapkan rotasi.

1. Pilih kontainer yang berisi semua video dan tambahkan efek Scroll Transform.

2. Tetapkan transformasi berikut saat menggulir.
   Status Awal: Opacity 1, Scale 1, Rotation 0
   Saat Menggulung: Opacity 1, Scale 1, Rotation 450

Ini akan membuat kontainer berputar seluruhnya saat digulir.

Langkah 4: Terapkan Rotasi Berlawanan pada Video

Saat kontainer berputar, video di dalamnya juga akan berputar. Namun, kita ingin agar video tampak tetap pada tempatnya.

1. Pilih semua video dalam kontainer dan tambahkan Scroll Transform.

2. Terapkan efek Scroll Transform yang sama, tetapi berikan rotasi berlawanan.
   Status Awal: Opacity 1, Scale 1, Rotation 0
   Saat Menggulung: Opacity 1, Scale 1, Rotation -450

Dengan demikian, kontainer berputar searah jarum jam, sementara video berputar berlawanan, menciptakan efek optik seolah video tetap pada tempatnya.

Langkah 5: Sesuaikan Ukuran Video

• Untuk mencegah kliping saat rotasi, perbesar ukuran video.

• Pilih semua video dan atur ukurannya menjadi 170% dari kontainer.

Langkah 6: Tetapkan Posisi Gulir Tetap

Kontainer harus tetap terlihat saat digulir. Pilih bingkai terluar (Height = Viewport) dan ubah Position → Fixed. Dengan demikian, kontainer tetap berada di tempatnya, dan hanya animasi gulir yang diterapkan.

Pekerjaan Tambahan

1. Tambahkan Efek Skala

   • Sunting Scroll Transform pada kontainer untuk menciptakan efek yang lebih dinamis.

   • Misal: Tetapkan Scale 2.0 untuk efek membesar sambil berputar.

2. Tambahkan Interaksi (Overlay)

   • Tempatkan tombol Putar pada video tengah.

   • Atur tombol agar membuka Overlay jika diklik. (Di dalam overlay, tempatkan video layar penuh dan tambahkan opsi tutup agar bisa kembali)

Sekarang, Anda dapat menyelesaikan efek grid video berputar yang bisa Anda lihat di Twitter tanpa kode di Framer.
Seperti dalam tutorial ini, di FramerFramer, Anda dapat menggunakan fungsi seperti Drag, Scroll Transform, dan Overlay untuk mewujudkan interaksi kuat tanpa menulis kode yang rumit.

Lihat Efek dan Proyek Remix→

Artikel ini diadaptasi dari konten Framer resmi ‘Create a rotating video grid in Framer’ yang diterjemahkan dan diubah.