7 Tips Animasi GSAP Esensial – Beragampengetahuan

const split = SplitText.create("h1", {
	type:"chars",
	mask:"chars"
})

elemen Setiap Fitur:

• Div eksternal dengan overflow: klip
• Div internal dengan teks

Dibagi dengan 17 karakter Buat 34 Divs Seperti yang ditunjukkan pada struktur DOM yang disederhanakan di bawah ini

<h1>SplitText Masking
	<div> <!-- char wrapper with overflow:clip -->
		<div>S</div>
	</div>
	<div> <!-- char wrapper with overflow:clip -->
		<div>p</div>
	</div>
	<div> <!-- char wrapper with overflow:clip -->
		<div>l</div>
	</div>
	<div> <!-- char wrapper with overflow:clip -->
		<div>i</div>
	</div>
	<div> <!-- char wrapper with overflow:clip -->
		<div>t</div>
	</div>	
	...
</h1>

Cara yang lebih efektif

Jika Anda ingin meminimalkan jumlah elemen DOM yang dibuat, Anda dapat membagi teks menjadi angka Dan Kabel. Anda kemudian dapat mengatur topeng pada elemen baris seperti ini:

const split = SplitText.create("h1", {
	type:"chars, lines",
	mask:"lines"
})

Demo: Masking teks terpisah (penggunaan karakter dan baris yang lebih baik)

Lihat Penep beragampengetahuan Tips 1: Split Text Masking – Menggunakan slorkl.tv (@snorkltv) pada codepen lebih baik.

Sekarang, jika Anda memeriksa DOM, Anda akan menemukan

• 1 line wrapper div dengan overflow: edit
• 1 baris div
• 1 Div per karakter

17 karakter terpisah Ini hanya akan membuat 19 divs:

<h1>SplitText Masking
	<div> <!-- line wrapper with overflow:clip -->
		<div> <!-- line -->
			<div>S</div>
			<div>p</div>
			<div>l</div>
			<div>i</div>
			<div>t</div>
			...
		</div> 
	</div> 
</h1>

Tip 2: Atur arah interleaving

Dalam pengalaman saya, 99% animasi yang diselingi berasal dari kiri ke kanan. Mungkin itu hanya karena ini adalah aliran standar teks tertulis.

Namun, GSAP membuatnya sangat mudah untuk menambahkan beberapa pizzaz animasi ke sebaran Anda.

Ubah arah dari Animasi interleaving mana yang perlu Anda mulai Sintaks Objek Untuk nilai interleaved

Interleaving normal

Biasanya, nilai misalignment adalah angka tunggal yang menentukan waktu antara awal setiap animasi elemen target.

gsap.to(targets, {x:100, stagger:0.2}) // 0.2 seconds between the start of each animation

Objek yang diselingi

Dengan menggunakan Objek yang diselingi Kami dapat menentukan beberapa parameter untuk menyempurnakan stallers kami, seperti setiap parameter, kuantitas, kemudahan, jala, dan pengulangan. Lihat dokumentasi kesalahan GSAP untuk detail lebih lanjut.
Fokus kami hari ini adalah pada dari Izinkan atribut yang kami tentukan dari Membimbing kebuntuan kita harus dimulai.

gsap.to(targets, {x:100,
   stagger: {
     each:0.2, // amount of time between the start of each animation
     from:”center” // animate from center of the targets array   
}

Properti dalam objek yang disisipkan dapat berupa nilai string ini.

• “Mulai” (default)
• “tengah”
• “Akhir”
• “tepian”
• “Acak”

Demo: jadwal arah yang diselingi

Dalam demo ini, karakternya hidup dari tengah dan kemudian keluar dari tepi.

Lihat Tip beragampengetahuan Pena 2 untuk snorkl.tv (@snorkltv) pada codepen: jadwal arah yang diselingi.

Demo: Visualisator Direction Interleaved

Lihat Penep beragampengetahuan Tip 2 untuk snorkl.tv (@snorkltv) pada codepen: Visualisasi arah interleaved.

Tip 3: Nilai Paket Array

Fungsi gsap.utils.wrap () memungkinkan Anda untuk mengekstrak nilai dari array dan menerapkannya ke beberapa target. Ini bagus untuk memungkinkan elemen untuk menghidupkan dari arah yang berlawanan (seperti ritsleting) dan menugaskan serangkaian warna ke banyak objek dan aplikasi yang lebih inovatif.

Atur warna dari array

Saya suka memanipulasi satu set elemen dengan gsap.utils.wrap () dengan set () segera.

// split the header
const split = SplitText.create("h1", {
	type:"chars"
})

//create an array of colors
const colors = ["lime", "yellow", "pink", "skyblue"]

// set each character to a color from the colors array
gsap.set(split.chars, {color:gsap.utils.wrap(colors)})

Saat warna terakhir dalam array dipilih (SkyBlue), GSAP akan Kembali ke titik awal array dan oleskan kapur ke elemen berikutnya.

Menghidupkan dari arah bergantian

Dalam kode berikut, setiap target akan hidup dari nilai Y bergantian -50 dan 50.

Perhatikan bahwa Anda dapat secara langsung mendefinisikan array di dalam fungsi Wrap ().

const tween = gsap.from(split.chars, {
	y:gsap.utils.wrap([-50, 50]),
	opacity:0,
	stagger:0.1
}) 

Demo: Kemasan Dasar

Lihat Tip Pena beragampengetahuan 3 untuk snorkl.tv (@snorkltv) pada codepen: pembungkus dasar.

Demo: Kemasan mewah

Dalam demonstrasi berikut, ada garis waktu untuk membuat serangkaian animasi Arah yang diselingi Dan membungkus. Apa yang diizinkan GSAP untuk Anda lakukan hanya dengan beberapa bentuk sederhana dan beberapa baris kode?

Lihat Penep beragampengetahuan Tip 3 untuk snorkl.tv (@snorkltv) pada codepen: pembungkus mewah.

Saat Anda menonton animasi, pastikan untuk menelusuri kode GSAP untuk melihat binari mana yang menjalankan setiap efek.

Saya sangat menyarankan Anda mengedit nilai animasi dan bereksperimen.

Tip 4: Mudah Mengacak Menggunakan Fungsi String “Acak ()”

GSAP memiliki fungsi utilitas acak sendiri gsap.utils.random (), yang memungkinkan Anda untuk memanfaatkan fungsi pengacakan yang nyaman Di mana saja Dalam kode JavaScript Anda.

// generate a random number between 0 and 450
const randomNumber = gsap.utils.random(0, 450)

Untuk mengacak nilai dalam animasi, kami dapat menggunakan String acak Pintasan dapat menyelamatkan kita saat mengetik.

//animate each target to a random x value between 0 and 450
gsap.to(targets, {x:"random(0, 450)"})

//the third parameter sets the value to snap to
gsap.to(targets, {x:"random(0, 450, 50)"}) // random number will be an increment of 50

//pick a random value from an array for each target
gsap.to(targets, fill:"random([pink, yellow, orange, salmon])" 

Demo: String acak

Lihat Tip beragampengetahuan Pen 4 untuk snorkl.tv (@snorkltv) pada codepen: string acak.

Tip 5: Repeatrefresh: Ya

Petunjuk berikutnya tampaknya menjadi sihir murni, karena memungkinkan animasi kami untuk menghasilkan hasil baru setiap kali diulang.

GSAP menjalankan animasi untuk pertama kalinya dan menyimpan nilai awal dan akhir dari animasi. Ini adalah optimasi kinerja, jadi tidak ada pekerjaan lain yang berkaitan dengan setiap pengulangan. Secara default, kembar yang mengulang selalu menghasilkan hasil yang sama persis (yang merupakan hal yang baik).

Kami dapat memberi tahu GSAP saat berhadapan dengan nilai-nilai berbasis dinamis atau fungsi, seperti nilai yang dihasilkan menggunakan sintaks string acak “Acak (0, 100)” Merekam nilai -nilai baru Ulangi dengan pengaturan Repatrefresh: Ya.

Anda bisa mengatur Repatrefresh: Ya ada Objek konfigurasi Satu tween atau jadwal.

//use on a tween
gsap.to(target, {x:”random(50, 100”, repeat:10, repeatRefresh:true})

//use on a timeline
const tl = gsap.timeline({repeat:10, repeatRefresh:true})

Demo: Pelet Repeatrefresh

Demonstrasi berikut berisi jadwal Repatrefresh: Ya.

Setiap kali lingkaran diulang, skala acak baru dan target X acak baru ditetapkan.

Pastikan untuk mempelajari kode JS dalam demo. Garpu dan memodifikasi nilainya sesuka hati.

Lihat Tip beragampengetahuan Pen 5 untuk slorkl.tv (@snorkltv) pada codepen: partikel repeatrefresh.

Tip 6: Jadwal Animasi ()

Animasi GSAP memiliki nilai Getter/Setter yang memungkinkan Anda mendapatkan properti animasi dan mengatur properti.

Metode Getter/Setter Umum:

• Jeda () dapatkan atau atur status jeda
• Durasi () dapatkan atau atur durasi
• Terbalik () mendapatkan atau menetapkan keadaan terbalik
• Progress () mendapatkan atau menetapkan kemajuan
• Rentang waktu () mendapatkan atau menetapkan skala waktu

Getter Fixer Metode yang Digunakan

animation.paused(true) // sets the paused state to true
console.log(animation.paused()) // gets the paused state
console.log(!animation.paused()) // gets the inverse of the paused state

Melihatnya beraksi

Dalam demonstrasi sebelumnya, ada kode Beralih status jeda Efek partikel.

//click to pause
document.addEventListener("click", function(){
	tl.paused(!tl.paused()) 
})

Kode berarti “setiap kali dokumen diklik, keadaan jeda dari garis waktu berubah menjadi timbal balik saat ini (atau sebaliknya).”

Jika animasi dijeda, itu akan menjadi “tidak beres” dan sebaliknya.

Ini bagus, tapi saya ingin menunjukkan tips untuk membuatnya melambat dan menghaluskannya.

Nilai Tween Number Getter/Setter

Kita tidak bisa menjeda () status antara tween () nyata atau Salah.

Yang membuat segalanya menarik Kita bisa tween Properti Animasi Getter/Setter Digital seperti Progress () dan Timescale ().

Rentang waktu () Faktor yang mewakili kecepatan pemutaran animasi.

• Jadwal (1): Bermain dengan kecepatan normal
• Skala waktu (0,5) bermain dengan kecepatan setengah
• Skala waktu (2) bermain dengan kecepatan dua kali

Mengatur jadwal ()

//create an animation with a duration of 5 seconds
const animation = gsap.to(box, {x:500, duration:5})

//playback at half-speed making it take 10 seconds to play
animation.timeScale(0.5)

Skala silang waktu ()

const animation = gsap.to(box, {x:500, duration:5}) // create a basic tween

// Over the course of 1 second reduce the timeScale of the animation to 0.5
gsap.to(animation, {timeScale:0.5, duration:1})

Skala rentang dinamis () untuk jeda yang halus dan tidak jeda

Alih -alih tiba -tiba mengubah keadaan animasi yang dijeda, karena demonstrasi partikel di atas, kami sekarang ingin tween skala waktu () untuk efek yang lebih halus.

Demo: Partikel Antara Skala Waktu ()

Lihat Penep beragampengetahuan Tip 6 untuk slorkl.tv (@snorkltv) pada codepen: partikel dengan jadwal () tween.

Klik di mana saja di demo di atas untuk melihat partikel turun dengan lancar dan mempercepat dengan setiap klik.

Kode berikut pada dasarnya mengatakan: “Jika animasi saat ini sedang diputar, maka kita akan melambat, kalau tidak kita akan mempercepat”. Setiap kali klik terjadi, nilai ISPLAY dapat diaktifkan antara benar dan salah sehingga dapat diperbarui untuk memperbarui pada klik berikutnya.

Tip 7: Tag GSDevTools dan ID Animasi

Sebagian besar demonstrasi dalam artikel ini menggunakan GSDevTools untuk membantu kami mengendalikan animasi. Saat membangun animasi, saya hanya suka bisa menggosok dengan kecepatan saya sendiri dan mempelajari sekuensing semua bagian yang bergerak.

Tapi alat yang kuat ini lebih dari sekadar menggosok, bermain, dan berhenti.

tanda

Tag masuk dan keluar memungkinkan kita untuk mengulang bagian mana pun dari animasi. Sebagai bonus tambahan, GSDevTools mengingat posisi tag sebelumnya, jadi setiap kali kami memuat ulang animasi, itu dimulai dan berakhir pada saat yang sama.

Ini membuat pengulangan dan mempelajarinya sangat mudah.

Penandaan adalah keuntungan besar ketika membangun animasi selama lebih dari 3 detik.

Untuk menjelajahi, buka demo Fancy Wrap () di jendela baru, pindahkan markup dan muat ulang.

Setel ID untuk menu animasi

Menu animasi memungkinkan kami untuk bernavigasi sesuai dengan bagian yang berbeda berdasarkan animasi ID Animasi. Fitur ini adalah penjaga pantai mutlak saat berhadapan dengan animasi panjang.

Karena sintaks GSAP membuat menciptakan urutan yang kompleks menjadi mudah, tidak perlu dipertanyakan lagi untuk menemukan diri Anda terlibat dalam 10, 20 atau bahkan 60 detik animasi!

Atur ID Animasi:

const tl = gsap.timeline({id:"fancy"})

//Add the animation to GSDevTools based on variable reference
GSDevTools.create({animation:tl})

//OR add the animation GSDevTools based on id
GSDevTools.create({animation:"fancy"})

Menggunakan nama kode “Fancy” di atas akan ditampilkan di GSDevTools.

Meskipun Anda dapat menggunakan ID dengan satu timeline, fitur ini paling membantu saat menggunakan jadwal bersarang.

Demo: GSAP semua orang

Lihat Tip Pena beragampengetahuan 7 untuk snorkl.tv (@snorkltv) pada codepen: Tag dan menu animasi.

Demonstrasi panjangnya 26 detik dan memiliki 7 jadwal anak -anak. Teliti kode untuk melihat bagaimana setiap garis waktu memiliki ID unik yang ditampilkan di menu animasi.

Menggunakan menu animasi Arahkan ke dan jelajahi setiap bagian.

Semoga Anda dapat melihat tag dan ID animasi saat menggunakan format panjang ini, animasi kode tangan!

Ingin mempelajari lebih lanjut tentang GSAP?

Saya di sini untuk membantu.

Saya telah menghabiskan hampir 5 tahun mengarsipkan semua tentang GSAP dalam format video dan format video dari hampir 300 kelas di CreateVecodingClub.com.

Saya menghabiskan bertahun -tahun menggunakan alat ActionScript Greensock sebagai pengembang flash “kembali ke hari”, dan pengalaman ini membuat saya dipekerjakan di Greensock ketika saya beralih ke JavaScript. Waktu saya di Greensock telah memungkinkan saya untuk membuat demo, video, dan sumber belajar yang tak terhitung jumlahnya.

Menghabiskan bertahun -tahun di forum dukungan yang menjawab ribuan pertanyaan telah memberi saya kemampuan unik untuk membantu pengembang dari semua tingkat keterampilan menghindari jebakan umum dan mendapatkan hasil maksimal dari perpustakaan animasi yang kuat ini.

Misi saya adalah membantu pengembang dari seluruh dunia menemukan kegembiraan animasi dengan kode melalui pelatihan kelas dunia yang terjangkau.

Kunjungi Klub Pengkodean Kreatif untuk informasi lebih lanjut.