Cara Memulai Ulang Animasi Setiap Kali Anda Menggulir Melewati Elemen dengan Divi & GSAP

Ketika datang untuk menganimasikan elemen di halaman Anda, kemungkinan besar Anda ingin mengaktifkan animasi elemen setelah memasuki viewport. Dengan pengaturan animasi bawaan Divi, segera setelah elemen itu terlihat, dan telah dianimasikan, elemen itu akan tetap statis hingga Anda memuat ulang seluruh halaman. Dalam beberapa kasus, Anda mungkin mencari pendekatan yang lebih konsisten, di mana animasi Anda dimulai ulang dengan setiap entri viewport. Melakukan hal ini akan membantu Anda merampingkan pengalaman yang dimiliki pengunjung di situs web Anda. Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana melakukannya menggunakan Divi, GSAP dan ScrollTrigger untuk GSAP. Setelah Anda mendapatkan pendekatannya, Anda akan dapat menerapkannya ke elemen apa pun di halaman Anda. Anda juga dapat mengunduh file JSON secara gratis!

Mari kita lakukan.

Pratinjau

Sebelum kita masuk ke tutorial, mari kita lihat sekilas hasilnya di berbagai ukuran layar.

Desktop

Seluler

Unduh Tata Letaknya GRATIS

Untuk mendapatkan tata letak gratis, Anda harus mengunduhnya terlebih dahulu menggunakan tombol di bawah ini. Untuk mendapatkan akses ke unduhan, Anda harus berlangganan daftar email Divi Daily kami dengan menggunakan formulir di bawah ini. Sebagai pelanggan baru, Anda akan menerima lebih banyak kebaikan Divi dan paket Tata Letak Divi gratis setiap hari Senin! Jika Anda sudah ada dalam daftar, cukup masukkan alamat email Anda di bawah ini dan klik unduh. Anda tidak akan "berlangganan ulang" atau menerima email tambahan.

Unduh File

Unduh Gratis

Bergabunglah dengan Divi Newsletter dan kami akan mengirimkan email kepada Anda salinan Paket Tata Letak Halaman Arahan Divi terbaik, ditambah banyak sumber daya, tip, dan trik Divi yang luar biasa dan gratis. Ikuti dan Anda akan menjadi master Divi dalam waktu singkat. Jika Anda sudah berlangganan cukup ketik alamat email Anda di bawah ini dan klik unduh untuk mengakses paket tata letak.

UNDUH

Anda telah berhasil berlangganan. Silakan periksa alamat email Anda untuk mengonfirmasi langganan Anda dan dapatkan akses ke paket tata letak Divi mingguan gratis!

1. Buat Desain Bagian

Tambahkan Bagian Placeholder

Sebelum kita mulai membuat desain, kita akan menambahkan dua bagian placeholder ke halaman yang sedang kita kerjakan. Dengan begitu, kita bisa melihat pengalaman scroll setelah desain selesai. Atau, Anda dapat menggunakan desain di dalam halaman yang telah Anda siapkan. Tambahkan bagian reguler baru.

Perekat

Ubah tinggi bagian sebagai berikut:

• Tinggi: 100vh

Bagian Placeholder Klon

Kemudian, kloning bagian itu sekali.

Tambahkan Bagian Baru Antara Bagian Placeholder

Untuk membuat desain yang dapat Anda lihat di pratinjau postingan ini, kami akan menambahkan bagian reguler baru di antara bagian placeholder.

Tambahkan Baris #1

Struktur Kolom

Lanjutkan dengan menambahkan baris baru ke bagian menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris, buka tab desain dan ubah pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar selokan: 2
• Lebar: 90%
• Lebar Maks: 2080px

Tambahkan Modul Teks #1 ke Kolom

Tambah isi

Kemudian, tambahkan Modul Teks pertama ke kolom dan sertakan beberapa konten pilihan Anda.

Pengaturan Teks

Pindah ke tab desain modul dan ubah pengaturan teks yang sesuai:

• Font Teks: Montserrat
• Berat Font Teks: Berat
• Gaya Font Teks: Huruf Besar
• Warna Teks: #f9f9f9
• Ukuran teks:
  • Desktop: 150px
  • Tablet & Telepon: 11vw
• Tinggi Baris Teks: 1.1em
• Perataan Teks: Tengah

Tambahkan Modul Teks #2 ke Kolom

Tambahkan Konten H2

Tambahkan Modul Teks lain di bawah yang sebelumnya dan sertakan beberapa konten H2.

Pengaturan Teks H2

Gaya teks H2 sebagai berikut:

• Judul 2 Font: Montserrat
• Judul 2 Perataan Teks: Tengah
• Judul 2 Ukuran Teks:
  • Desktop: 80px
  • Tablet & Telepon: 10vw

Perekat

Tambahkan lebar 100% juga.

• Lebar: 100%

Posisi

Dan reposisi seluruh modul di tab lanjutan.

• Posisi: Absolut
• Lokasi: Pusat

Tambahkan Baris #2

Struktur Kolom

Tambahkan baris lain di bawah baris sebelumnya, menggunakan struktur kolom berikut:

Perekat

Tanpa menambahkan modul, buka pengaturan baris dan sesuaikan pengaturan ukuran sebagai berikut:

• Gunakan Lebar Talang Kustom: Ya
• Lebar Talang: 2
• Lebar: 90%
• Lebar Maks: 2080px

Pengaturan Kolom 1

Kemudian, buka pengaturan kolom 1.

Gambar latar belakang

Unggah gambar latar belakang pilihan Anda.

• Ukuran Gambar Latar Belakang: Sampul
• Posisi Gambar Latar Belakang: Tengah

Jarak

Ubah pengaturan spasi kolom berikutnya.

• Padding Atas: 100px
• Bantalan Bawah:
  • Desktop: 400px
  • Tablet & Ponsel: 200px
• Padding Kiri: 5,5%
• Padding Kanan: 5,5%

Tambahkan Modul Teks #1 ke Kolom 1

Tambahkan Konten H4

Kemudian, tambahkan Modul Teks ke kolom 1 dengan beberapa konten H4.

Pengaturan Teks H4

Gaya teks H4 sesuai:

• Judul 4 Font: Lato
• Judul 4 Berat Font: Berat
• Judul 4 Gaya Font: Huruf Besar
• Judul 4 Ukuran Teks: 13px
• Spasi Judul 4 Huruf: 2px

Tambahkan Modul Teks #2 ke Kolom 1

Tambahkan Konten H3

Tambahkan Modul Teks lain di bawah yang sebelumnya, menggunakan beberapa konten H3.

Pengaturan Teks H3

Ubah pengaturan teks H3 yang sesuai:

• Judul 3 Font: Montserrat
• Judul 3 Ukuran Teks: 36px
• Spasi Judul 3 Huruf: 1px
• Pos 3 Tinggi Baris: 1.2em

Tambahkan Modul Teks #3 ke Kolom 1

Tambahkan Konten Deskripsi

Tambahkan Modul Teks terakhir yang berisi beberapa konten deskripsi pilihan Anda.

Pengaturan Teks

Ubah pengaturan teks modul sebagai berikut:

• Font Teks: Lato
• Warna Teks: #4c4c4c
• Spasi Huruf Teks: 0.5px
• Tinggi Baris Teks: 2em

Tambahkan Modul Tombol ke Kolom 1

Tambahkan Salinan

Modul terakhir yang kita butuhkan di kolom ini adalah Modul Tombol. Tambahkan beberapa salinan pilihan Anda.

Pengaturan Tombol

Gaya tombol di tab desain.

• Gunakan Gaya Kustom Untuk Tombol: Ya
• Ukuran Teks Tombol: 14px
• Warna Teks Tombol: #ffffff
• Warna Latar Tombol: #000000
• Lebar Batas Tombol: 0px

• Font Tombol: Lato
• Berat Huruf Tombol: Tebal
• Gaya Font Tombol: Huruf Besar

Gunakan kembali Kolom 1

Hapus Kolom 2 & 3

Setelah Anda menyelesaikan kolom 1, dan semua modul di dalamnya, Anda dapat menghapus dua kolom yang tersisa dari baris tersebut.

Kolom Klon 1 Dua Kali

Dan gunakan kembali kolom 1 dengan mengkloningnya dua kali.

Ubah Gambar Latar Belakang Kolom Duplikat

Pastikan Anda mengubah gambar latar belakang setiap kolom duplikat.

Ubah Konten di Kolom Duplikat

Seiring dengan isi modul.

Tambahkan Transform Terjemahkan ke Pengaturan Kolom 2

Kemudian, buka pengaturan kolom 2 dan masuk ke tab desain. Sesampai di sana, tambahkan beberapa nilai terjemahan transformasi di berbagai ukuran layar untuk menyelesaikan desain.

• Kiri:
  • Desktop: 50px
  • Tablet & Ponsel: 0px

2. Terapkan Teknik Animasi Restart ke Desain

Tambahkan Kelas CSS ke Baris #2

Sekarang desain kita sudah siap, kita bisa fokus pada teknik animasi restart. Kami akan menargetkan beberapa modul sekaligus untuk ini. Pertama, buka pengaturan baris kedua dan terapkan kelas CSS berikut:

• Kelas CSS: baris-pemicu-animasi

Tambahkan Modul Kode ke Baris #1

Kelas CSS yang telah kita tambahkan di langkah sebelumnya dari tutorial ini akan membantu kita menargetkan semua modul di dalam baris ini sekaligus. Untuk membuat animasi mulai ulang, kami menggunakan beberapa kode JQuery, pustaka JavaScript GSAP, dan pustaka ScrollTrigger untuk GSAP. Untuk menambahkan kode ini, kita akan menyisipkan Modul Kode baru di bawah Modul Teks kedua di baris #1.

Tambahkan Perpustakaan GSAP & ScrollTrigger

Pastikan Anda menambahkan pustaka GSAP dan ScrollTrigger di dalam tag skrip baru.

• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
• https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

Tambahkan Tag Skrip Baru

Kemudian, tambahkan tag skrip baru di bawah tag skrip perpustakaan.

Tambahkan Fungsi GSAP + ScrollTrigger

Di dalam tag skrip baru, kami akan menyalin tempel baris kode JQuery berikut:

jQuery(document).ready(function($){

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

Kode ini akan menargetkan semua modul baris sekaligus dan akan memulai ulang animasi segera setelah pengunjung memasuki area pandang lagi. Animasi, dalam hal ini, cukup sederhana dan minimal. Namun, dengan GSAP dan ScrollTrigger, Anda dapat membuat jenis animasi apa pun yang Anda inginkan, jadi ini pasti layak untuk dilihat!

Pratinjau

Sekarang setelah kita melalui semua langkah, mari kita lihat hasil akhir di berbagai ukuran layar.

Desktop

Seluler

Pikiran Akhir

Dalam posting ini, kami telah menunjukkan kepada Anda cara memulai ulang animasi segera setelah elemen memasuki viewport. Pendekatan ini membantu Anda menciptakan pengalaman yang konsisten, tidak peduli bagaimana pengunjung Anda menggulir. Anda juga dapat mengunduh file JSON secara gratis! Jika Anda memiliki pertanyaan atau saran, jangan ragu untuk meninggalkan komentar di bagian komentar di bawah.

Jika Anda ingin mempelajari lebih lanjut tentang Divi dan mendapatkan lebih banyak gratisan Divi, pastikan Anda berlangganan buletin email dan saluran YouTube kami sehingga Anda akan selalu menjadi salah satu orang pertama yang mengetahui dan mendapatkan manfaat dari konten gratis ini.