83.3K+İndir
Kullanım kılavuzuna geç
gsap-performanceyazan GreenSock

GSAP Performance Skill.

Claude Code ve Codex için hareket ve video skill'i: GSAP performans: dönüşümler, layout thrash'ten kaçınma, will-change, toplu işleme.

  • Motion & Video
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
greensock/gsap-skills · skills/gsap-performance/SKILL.mdSKILL.md
--- name: gsap-performance description: Official GSAP skill for performance — prefer transforms, avoid layout thrashing, will-change, batching. Use when optimizing GSAP animations, reducing jank, or when the user asks about animation performance, FPS, or smooth 60fps. --- ## When to Use This Skill ## Prefer Transform and Opacity ## will-change ## Batch Reads and Writes ## Many Elements (Stagger, Lists) ## Frequently updated properties (e.g. mouse followers)
Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 4.105 karakter

01 Ne yapar

Claude Code ve Codex'te gsap-performance Skill Ne Yapar

Özet, iş akışı ve çıktılar; hepsi skill'in SKILL.md dosyasından okundu.

SKILL.md'den14-09-2026 tarihinde okundu · kayıtlı bir çalıştırma değil

Skill'in Kendi İfadeleriyle

Ucuz özellikler seçerek ve layout işini önleyerek animasyonları akıcı 60fps'te tutmak için resmi GSAP rehberliği. Width, height, top, left, margin veya padding yerine transform anahtarlarını (x, y, scaleX, scaleY, rotation, rotationX, rotationY, skewX, skewY) ve opacity'yi animasyonlamanızı, will-change'i sadece gerçekten animasyonlanan elementlerde CSS'e koymanızı ve layout'un parçalanmaması için tüm DOM okumalarını yazmalardan önce yapmanızı söyler.

Toplu işleme rehberliği; elle geciktirilen tween'ler yerine stagger kullanımını, uzun listeler için virtualization'ı, fare takipçileri için gsap.quickTo()'yu, debounce edilmiş ScrollTrigger.refresh() ile pin ve scrub ayarlarını ve ekran dışındaki tween'lerin sonlandırılmasını kapsar. Bu, mevcut GSAP animasyonlarını ince ayarlayan tasarımcılar ve geliştiriciler içindir, onları oluşturanlar için değil.

Neler üretir

  • Animasyonlanan elementin CSS'ine eklenecek bir will-change bildirimi.
  • Bir container üzerindeki mousemove listener'ı tarafından yönlendirilen, x ve y için bir gsap.quickTo() kurulumu.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Compositor Dostu Özellikleri Animasyonlayın

    Animasyonu, layout ve paint'i tetiklemek yerine işi compositor üzerinde tutan transform anahtarları ve opacity ile sınırlayın.

  2. 02
    Yazmaları GSAP'in Toplu İşlemesine Bırakın

    GSAP zaten güncellemeleri dahili olarak toplu işler, dolayısıyla risk kendi DOM kodunuzun okuma ve yazmaları bunun etrafında birbirine karıştırmasıdır.

  3. 03
    Sık Kullanılan Değerler için Bir Tween'i Yeniden Kullanın

    Her pointer hareketinde güncellenen özellikler için, gsap.quickTo() her güncelleme için yeni bir tween ayırmak yerine tek bir tween'i canlı tutar.

  4. 04
    Scroll Kaynaklı İşi Kontrol Edin

    scrub: 1 gibi küçük bir scrub değeri, scroll sırasında yapılan işi azaltabilir, ancak dosya bu ayarın düşük performanslı cihazlarda test edilmesi gerektiğini söylüyor.

  5. 05
    Göremediğiniz Animasyonu Durdurun

    Örneğin kullanıcı bölümden uzaklaştığında, ekran dışındaki ve etkin olmayan animasyonları duraklatın veya sonlandırın.

02 Uyumunuzu bulun

gsap-performance Ajanı Ne Zaman Kullanılır

Claude Code veya Codex'te iş bu tür hareket ve video olduğunda gsap-performance ajanını kullanın. Aşağıdaki uygunluk ve sınırlar ajanın kendi dosyasından alınmıştır.

İyi Uyum

  • Mevcut bir GSAP animasyonu kare düşürüyor ve layout ile paint maliyetini azaltmak istiyorsunuz.
  • Biri bir GSAP projesinde jank, FPS veya hızlı animasyon için en iyi uygulamalar hakkında soru soruyor.
  • Uzun bir listeyi animasyonluyorsunuz ve virtualization ile yüzlerce eşzamanlı tween'i önleme konusunda tavsiyeye ihtiyacınız var.
  • Bir scroll bölümü bir elementi pinliyor ve neyin promote edildiğini sınırlamanız gerekiyor.

Sınırları Bilin

  • Her ihtimale karşı will-change veya force3D'yi her şeye ayarlamak açıkça hatalıdır; bunlar gerçekten animasyonlanan elementler içindir.
  • Yüzlerce çakışan tween veya ScrollTrigger, düşük performanslı cihazlarda test edilmemişse anti-pattern olarak kabul edilir.

Ne Sağlamalısınız

  • Animasyonunuzun şu anda değiştirdiği özelliklerTransform ve opacity'nin layout ağırlıklı özelliklerin yerini alıp alamayacağını değerlendirmek için neyin animasyonlandığını bilmeniz gerekir.

03 Skill'in içinde

gsap-performance Skill'in Claude Code ve Codex'e Verdiği Kurallar

SKILL.md'nin ajan için belirlediği 7 somut talimat, varsayılan ve sınır — dosyanın sonucu değiştiren kısmı.

  1. Layout Tetikleyen Özelliklerden Kaçının

    width, height, top, left, margin ve padding düzeni (layout) tetikler ve takılmalara (jank) yol açabilir; bir transform aynı etkiyi sağlıyorsa bunlardan kaçının.

  2. Left ve Top Yerine X ve Y ile Hareket Ettirin

    GSAP'ta x ve y varsayılan olarak transform'dur (translate); bu nedenle hareket için left veya top yerine bunları kullanın.

  3. will-change Yalnızca Animasyon Olan Yerde

    will-change özelliğini CSS'te yalnızca animasyon uygulanacak elemanlara ayarlayın; bu, tarayıcıya katmanı öne çıkarması için bir ipucu verir, dolayısıyla sadece animasyonlu elemanlarda kullanılmalıdır.

  4. Manuel Gecikmeler Yerine Stagger

    Elemanlar arasında animasyon aynıysa, elle yazılmış gecikmelerle birçok ayrı tween yerine stagger kullanın.

  5. Her Karede Timeline Oluşturmayın

    Timeline'ları yeniden kullanın; her karede yeni timeline oluşturmak gereksiz kaynak tüketimi olarak belirtilir.

  6. ScrollTrigger'ı Yalnızca Gerçek Düzen Değişikliklerinde Yenileyin

    ScrollTrigger.refresh() işlevini, içerik yüklendikten sonra gibi düzen gerçekten değiştiğinde çağırın, her yeniden boyutlandırmada değil, ve mümkün olduğunda bunu debounce edin.

  7. Başlattığınızı Temizleyin

    Ekran dışındaki animasyonları temizleyin veya sonlandırın ve düzen değiştiğinde ScrollTrigger'ı, mümkünse debounce ederek, yenileyin; böylece gerekmediğinde hiçbir şey çalışmaya devam etmez.

04 İşe koyun

gsap-performance'ı Claude Code veya Codex'e kurun

Bir npx skills add komutu, ardından ajanınızda ilk görev ve sonuç için bir kontrol listesi.

gsap-performance'ı Claude Code, Codex veya Ajanınıza ekleyin

Projenizde çalıştırın; kurulum aracı, bunun hangi ajana ekleneceğini sorar.

Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance

skills/gsap-performance/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgeleyebilir.

Skill'e İlk Hareket ve Video Görevi Verin

Skill'in kendi terimleriyle yazıldı; köşeli parantezli bölümleri kendi malzemenizle değiştirin.

Starter prompt
Here is my [product landing page] with a GSAP intro and a pinned ScrollTrigger section, and it drops frames on an [older Android phone]. Go through the animation and tell me which properties I should swap for transforms, which elements genuinely need will-change, and whether my ScrollTrigger.refresh() calls fire more often than the layout actually changes. I also have a [custom cursor] that follows the pointer and feels heavy.

Kaynak: SKILL.md'den, skill'in kendi terimleriyle yazıldı.

İlk Sonucu Kontrol Edin

SKILL.md'nin doğru bir sonucun nasıl göründüğüne dair söyledikleri:

  • Birbirine karışan DOM okuma ve yazma işlemlerini arayın, çünkü bu tekrarlanan düzen sıkıntısına (layout thrashing) neden olur; önce tüm okumalar yapılmalıdır.
  • Hiçbir şeyin çalışır durumda kalmadığını doğrulayın: başıboş tween'ler ve ScrollTrigger'lar çalışmaya devam ederse performansı ve doğruluğu olumsuz etkiler.
  • Animasyon uyguladığınız özelliklerin transform ve opacity üzerinde kaldığını doğrulayın, böylece tarayıcı sadece composite işi yapar.

OpenDesign içinde gsap-performance dahil edilmiştir: Plugins → Skills, üst çubuktan seçin.

OpenDesign İndirHızlı başlangıcı okuyun

05 Açık kaynak, izlenebilir

Kaynak, Lisans ve Doğrulama

Bu sayfadaki bilgilerin nereden geldiği ve en son ne zaman kontrol edildiği.

Author
GreenSock
Repository
github.com/greensock/gsap-skills Branch main
Skill dosyası
skills/gsap-performance/SKILL.md Doğrulama sırasında içerik sağlama toplamı kaydedildi; commit aed9cfd
License
MIT LICENSE dosyasından; SKILL.md "MIT" diyor.
Repository yıldızları
15.248 Katalogda 8 skill içeren greensock/gsap-skills deposunun tamamı için 2026-09-14 tarihinde alınan GitHub anlık görüntüsü. gsap-performance için bir derecelendirme veya kullanım sayısı değil.
OpenDesign tarafından doğrulandı
2026-09-14 Kaynak dosya, yol, lisans metni ve yıldız sayısı kontrol edildi. OpenDesign ana sürümünde paketlenmiştir (2026-08-28 tarihinde kontrol edildi); bu sayfada canlı bir çalıştırma kaydı bulunmamaktadır.

SKILL.md içinde

  1. Bu Skill Ne Zaman KullanılırGSAP animasyonlarını 60fps için optimize ederken veya takılma (jank) sorunlarında uygulayın; ilgili skill'lere işaret eder.
  2. Transform ve Opacity'yi Tercih EdinTransform anahtarlarını ve opacity'yi animasyonlaştırın; düzen özelliklerinden kaçının; left ve top yerine x ve y kullanın.
  3. will-changeAnimasyon uygulanacak elemanlara katman öne çıkarma ipucu vermek için CSS'te will-change ekleyin.
  4. Okuma ve Yazmaları GruplaGSAP yazmaları gruplar; sıkışmayı önlemek için tüm DOM okumalarını yazmalardan önce yapın.
  5. Çok Sayıda Eleman (Stagger, Listeler)Stagger, manuel gecikmelerden daha iyidir; uzun listeleri sanallaştırın; yeni timeline oluşturmak yerine mevcutları yeniden kullanın.
  6. Sık güncellenen özellikler (örn. imleç takipçileri)Sık güncellenen x ve y değerleri için bir mousemove handler ile gsap.quickTo kullanın.
  7. ScrollTrigger ve PerformansSadece gerekli olanı pinleyin, küçük bir scrub değeri deneyin, yalnızca düzen değiştiğinde refresh yapın.
  8. Eşzamanlı İşi AzaltınEkran dışındaki animasyonları duraklatın veya sonlandırın; ağır özellik animasyonunu basitleştirin veya sıralayın.
  9. En iyi uygulamalarDört maddelik kontrol listesi: transform ve opacity, kapsamlı will-change, stagger, cleanup ve refresh.
  10. YapmayınAnti-pattern'ler: hareket için layout özellikleri, körlemesine will-change veya force3D, test edilmemiş hacim, ihmal edilen cleanup.
Skill'in Kendi Açıklaması
"Performans için resmi GSAP skill'i — transform'ları tercih edin, düzen çarpışmasından kaçının, will-change, toplu işleme. GSAP animasyonlarını optimize ederken, takılmaları azaltırken veya kullanıcı animasyon performansı, FPS veya pürüzsüz 60fps hakkında sorduğunda kullanın."

SKILL.md'den ön bilgi açıklaması. Tam dosya yaklaşık 4.105 karakterdir. GitHub'da tam dosyayı okuyun.

06 Kurmadan önce

gsap-performance Skill Hakkında Sorular

Yanıtlar, 2026-09-14 tarihinde okunan SKILL.md üzerinden alınmıştır, kaydedilmiş bir çalıştırmadan değil.

Bunu gsap-core yerine mi kullanmalıyım?

Hayır. Bu skill, normal GSAP çalışmasının üzerine gelen performans katmanıdır: animasyonlar gsap-core (transform'lar, autoAlpha) ve gsap-timeline ile oluşturulur, ScrollTrigger performans detayları ise gsap-scrolltrigger içinde bulunur.

Bir mouse follower nasıl oluşturmalıyım?

x ve y değerleri için bir duration ve ease ile gsap.quickTo() kullanın, ardından döndürülen fonksiyonları bir mousemove listener'dan çağırın. Bu, her güncellemede yeni bir tween oluşturmak yerine tek bir tween'i yeniden kullanır.

GSAP Performance

gsap-performance'ı Gerçek Bir Hareket ve Video Görevinde Çalıştırın.

gsap-performance skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'de skill'i seçin, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirinTüm skill'lere göz atın
Terminal
npx skills add https://github.com/greensock/gsap-skills --skill gsap-performance