Skill'in Kendi İfadeleriyle
ScrollTrigger, GSAP'in scroll'a bağlı animasyon eklentisidir: tween'leri ve timeline'ları scroll konumlarında tetikler, bölümleri pinler, ilerlemeyi scroll'a göre scrub eder ve bir timeline'ı bir start/end aralığı boyunca yönlendirir.
Config kelime dağarcığını eksiksiz şekilde ortaya koyar — trigger, clamp() ve relative değerler dahil start/end, endTrigger, scrub, toggleActions, pin ve pinSpacing, snap, scroller, id, refreshPriority — ve birlikte gelen kademeli reveal'lar için ScrollTrigger.batch(), üçüncü taraf smooth scroller'lar için scrollerProxy() ve sahte yatay scroll için containerAnimation ekler. Varsayılanlar her seçenek için belirtilmiştir; ayrıca en iyi uygulamalar kontrol listesi ve React temizliği, refresh sırası, ease ve kalıntı işaretleri kapsayan açık bir Yapılmayacaklar listesi bulunur.
Neler üretir
- İlerlemesi, trigger'ın start-to-end aralığı üzerinden scroll konumuna bağlanmış bir tween veya timeline.
- Bağlı bir tween olmadan oluşturulan, self.progress'ten UI güncellemek gibi özel davranışlar için callback'lerle kullanılan bağımsız bir ScrollTrigger.
- ScrollTrigger.batch() tarafından döndürülen, her batch hedefi için bir tane olmak üzere ScrollTrigger örneklerinden oluşan bir Array.
- Bir containerAnimation tween'inin ürettiği yatay hareketle tetiklenen iç içe tween'ler.
Nasıl Çalışır
- 01Plugin'i Bir Kez Kaydedin
ScrollTrigger, animasyon API'sinin çekirdeğinin bir parçası olarak değil, bir plugin olarak gelir; bu nedenle herhangi bir scrollTrigger yapılandırması çalışmadan önce, script yüklendikten sonra bir kez kaydedilir.
- 02Bir scrollTrigger Yapılandırması Ekleyin
Bir tween veya timeline'a, tetikleyici elementi ve tetikleyici konumunu görüntü alanı konumuna göre tanımlayan bir start ile end değeri belirten bir scrollTrigger nesnesi verilir.
- 03Scroll'un Playhead'i Nasıl Yönlendireceğini Seçin
Scrub, ilerlemeyi scroll konumuna sürekli olarak bağlar; isteğe bağlı olarak sayısal bir yakalama gecikmesiyle, toggleActions ise dört geçiş noktasında ayrık play/reverse eylemlerini tetikler.
- 04Bir Bölümü Sabitleyin ve Bir Timeline'ı Scrub Edin
Pinning, aralık etkin olduğu sürece tetikleyici elementi sabit tutar ve o ScrollTrigger'a bağlı bir timeline, çocuklarını aynı start-to-end aralığında ilerletir.
- 05Birlikte Gelen Elementleri Toplu İşleyin
ScrollTrigger.batch(), her hedef için bir ScrollTrigger oluşturur ve callback'lerini kısa bir aralık içinde toplar; böylece neredeyse eşzamanlı gelen elementler tek bir çağrıda stagger ile animasyonlandırılabilir.
- 06İçerik Kaybolduğunda Örnekleri Sonlandırın
Bir tek sayfa uygulamasında olduğu gibi animasyonlu elementleri kaldırmak veya sayfa değiştirmek, ilgili örneklerin sonlandırılmasını gerektirir; aksi halde bunlar geçersiz elementlere karşı çalışmaya devam eder.