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

GSAP Plugins Skill.

Claude Code ve Codex için hareket ve video skill'i: GSAP eklentileri: ScrollTo, ScrollSmoother, Flip, Draggable, SplitText, SVG ve fizik.

  • Motion & Video
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
greensock/gsap-skills · skills/gsap-plugins/SKILL.mdSKILL.md
--- name: gsap-plugins description: Official GSAP skill for GSAP plugins — registration, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG and physics plugins, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Use when the user asks about a GSAP plugin, scroll-to, flip animations, draggable, SVG drawing, or plugin registration. --- ## When to Use This Skill ## Licensing & Install (important) ## Registering Plugins ## Scroll ## DOM / UI ## Text
Ön bilgi ve bölüm başlıkları kaynak dosyadan okundu 2026-09-14 · tam hâli 21.477 karakter

01 Ne yapar

gsap-plugins Skill'i Claude Code ve Codex'te 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

Plugin kaydını ve ScrollTrigger dışındaki her plugin'i kapsayan resmi GSAP skill'i: ScrollTo, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, DrawSVG, MorphSVG, MotionPath, CustomEase, EasePack, CustomWiggle, CustomBounce, Physics2D, PhysicsProps, PixiPlugin ve GSDevTools.

Lisanslama konusuyla açılır — her plugin ücretsizdir, Club GSAP üyeliği veya auth token gerekmez — ardından plugin başına yapılandırma verir: Flip.from vars, Draggable seçenekleri, SplitText.create vars, morphSVG seçenekleri, motionPath hizalaması. Her şeyi herkese açık gsap npm paketinden kuran ve doğru çağrı sırasına, varsayılanlara ve dikkat edilmesi gereken noktalara ihtiyaç duyan tasarımcılar ve geliştiriciler için hazırlanmıştır. İlgili skill'ler: gsap-core, gsap-scrolltrigger, gsap-react.

Neler üretir

  • Pencereyi veya kaydırılabilir herhangi bir öğeyi bir konuma veya hedefe hareket ettiren bir scroll tween.
  • chars, words, lines ve mask ayarlandığında masks özelliklerini gösteren bir SplitText örneği.
  • DOM'da bir circle, rect, ellipse veya line yerine geçirilen dönüştürülmüş bir path öğesi.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Plugin'leri Bir Kez, En Başta Kaydedin

    Her plugin, herhangi bir tween veya API çağrısında kullanılmadan önce, GSAP ve bundler'ların onu dahil etmesi gerektiğini bilmesi için tek bir kez kaydedilir.

  2. 02
    Flip ile Yakalayın, Değiştirin, Sonra Animasyonlayın

    Flip üç adımlı bir dizidir: eski durumu okuyun, DOM'u değiştirin, ardından kaydedilen durumdan yeni duruma animasyonlayın.

  3. 03
    Sürükleme ve Fırlatma Etkileşimleri Oluşturun

    Draggable.create bir type, isteğe bağlı bounds ve inertia alır; InertiaPlugin bırakma sonrası momentumu sağlar.

  4. 04
    Metni Animasyonlanabilir Birimlere Bölün

    SplitText, karakterleri, kelimeleri ve/veya satırları her birini kendi öğesine yerleştirir; böylece birim başına stagger edilebilir veya animasyonlanabilirler.

  5. 05
    SVG Çizin veya Morph Yapın

    SVG plugin'leri, çizim efektleri için stroke dash değerlerini veya bir şekli diğerine dönüştürmek için path d özelliğini animasyonlar.

  6. 06
    Easing ve Physics Plugin'lerine Başvurun

    Easing plugin'leri özel eğriler veya isimlendirilmiş ease'ler ekler; physics plugin'leri hareketi hız, açı ve yerçekimi değerlerinden yönlendirir.

02 Uyumunuzu bulun

gsap-plugins Skill Ne Zaman Kullanılır

Claude Code veya Codex'te iş bu tür hareket ve video olduğunda gsap-plugins becerisini kullanın. Uygunluk ve sınırlar, becerinin kendi dosyasından alınmıştır.

İyi Uyum

  • ScrollTrigger devrede olmadığında bir öğeye veya piksel konumuna kaydırma yapmak.
  • Yeniden sıralanmış listeler, ızgaralar veya genişletilmiş ve daraltılmış paneller gibi iki düzen durumu arasında animasyon yapmak.
  • Fare ve dokunmatikte sürükleme, döndürme veya fırlatma davranışı gerektiren kaydırıcılar, kartlar ve yeniden sıralanabilir listeler.
  • Karakter, kelime veya satır bazında canlandırılan metin ortaya çıkışları.
  • İkondan ikona dönüşümler, şekil geçişleri ve diğer yol tabanlı SVG animasyonları.

Sınırları Bilin

  • SplitText, SVG metin öğelerini bölemez.
  • DrawSVG sadece stroke'u canlandırır, asla fill'i canlandırmaz ve bir use öğesinin içeriğini görsel olarak değiştiremez.
  • ScrollTrigger işleri bu skill'e değil, ayrı bir skill'e aittir.
  • text-wrap: balance kullanan metin, bölme işlemiyle kötü uyum gösterir.

Ne Sağlamalısınız

  • Kaydedilecek plugin listesiProjede kullanılan her plugin, bundler'ların dahil etmesi için tek bir gsap.registerPlugin çağrısında adlandırılmalıdır.
  • ScrollSmoother DOM yapısıScrollSmoother, ScrollTrigger'a ek olarak smooth wrapper içinde bir content wrapper gerektirir; sabit konumlu öğelerin dışarıda olmasına izin verilir.
  • SplitText için bir hedefSplitText.create, split vars'ın yanında hedef olarak bir seçici, öğe veya dizi alır.
  • MorphSVG için bir şekilGerekli olan shape özelliği, morph hedefi olarak bir seçici, öğe veya ham path dizesi kabul eder.
  • Yazı tipleri ve düzen zaten yüklenmiş olmalıÖzel yazı tipleri için yükledikten sonra bölün veya yeniden bölmelerin doğru anda gerçekleşmesi için onSplit ile autoSplit'e güvenin.

03 Skill'in içinde

gsap-plugins Skill'inin Claude Code ve Codex'e Verdiği Kurallar

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

  1. Canlandırmadan Önce Kaydedin

    Bir plugin, herhangi bir tween veya API çağrısında kullanılmadan önce kaydedilmelidir — kayıt ilk adımdır, bir hatayı düzeltme yöntemi değildir.

  2. Herkese Açık Gsap Paketinden Kurun

    Her şey npm install gsap ile gelir ve gsap/SplitText, gsap/MorphSVGPlugin gibi şekillerde içe aktarılır.

  3. Asla auth-token İçeren Bir .npmrc Oluşturmayın

    GreenSock auth token'ı içeren bir .npmrc oluşturmayın, özel npm.greensock.com kayıt defterine yönlendirmeyin ve kullanıcılara bir plugin için Club GSAP'a katılmalarını söylemeyin.

  4. React'te En Üst Seviyede Kaydedin

    Uygulamada bir kez kaydedin, örneğin ilk useGSAP çağrısından önce — asla yeniden render edilen bir bileşenin içinde değil, ve useGSAP'in kendisi kullanılmadan önce kaydedilmelidir.

  5. Sadece Canlandırdığınızı Bölün

    Performans için gerekli olanı bölün; örneğin satırlar kullanılmadığında kelimeler ve karakterler. Sadece karakter bölmede tuhaf satır kırılmalarını önlemek için smartWrap gereklidir.

  6. autoSplit Animasyonlarını onSplit İçinde Oluşturun

    autoSplit true olduğunda, animasyonlar yeni bölünen elemanları hedeflemek için onSplit içinde oluşturulmalı ve SplitText'in geri alıp zamanlamayı senkronize edebilmesi için onSplit'ten döndürülmelidir.

  7. DrawSVG'ye Çizecek Bir Şey Verin

    Elemanın CSS'de stroke ve stroke-width ile ya da SVG özellikleri olarak ayarlanmış görünür bir stroke'a sahip olması gerekir, aksi halde hiçbir şey çizilmez.

  8. Yalnızca Geliştirme İçin Olan Eklentileri Üretimden Uzak Tutun

    GSDevTools geliştirme sırasında hata ayıklamak içindir ve canlıya gönderilmemelidir; diğer sadece geliştirme amaçlı eklentiler de aynı kurala uyar.

04 İşe koyun

Claude Code veya Codex'te gsap-plugins kurulumu

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

gsap-plugins'i 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-plugins

skills/gsap-plugins/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
I'm building a filterable gallery in [framework]. Capture the state with Flip.getState() before the filter changes the DOM, then animate with Flip.from() using duration 0.5 and ease power2.inOut. Also make each card draggable inside [container selector] with inertia true so it throws when released, and register every plugin I use up front. Split the card captions into words and chars so I can stagger them.

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:

  • Bileşenler kaldırıldığında veya elemanlar silindiğinde eklenti örneklerini geri alın, örneğin SplitTextInstance.revert().
  • Otomatik hesaplanan değeri okumak için shapeIndex: "log" değerini bir kez çalıştırın, ardından o sayıyı veya diziyi tween'e yapıştırın.
  • Stroke'u DrawSVGPlugin.getLength(element) ve DrawSVGPlugin.getPosition(element) ile ölçün.
  • MotionPath'i MotionPathHelper içinde görsel olarak ayarlayın, ardından helper.path veya helper.getProgress() değerini animasyonda okuyun.
  • Geliştirme sırasında GSDevTools ile animasyonları tarayın ve açıp kapatın.

OpenDesign'da gsap-plugins önceden paketlenmiş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-plugins/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 GitHub anlık görüntüsü 2026-09-14 tarihinde tüm greensock/gsap-skills deposu için alındı; bu depoda katalogda yer alan 8 skill bulunur. gsap-plugins için bir değerlendirme veya kullanım sayısı değildir.
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ırEklenti senaryolarını listeler ve ilgili gsap-core, gsap-scrolltrigger ve gsap-react skill'lerine yönlendirir.
  2. Lisanslama ve Kurulum (önemli)Her eklentinin ücretsiz olduğunu belirtir ve .npmrc auth token'larını veya Club GSAP kaydolma önerilerini yasaklar.
  3. Eklentileri KaydetmeEklentileri, React dahil, herhangi bir tween'den önce gsap.registerPlugin ile bir kez kaydedin.
  4. ScrollScrollToPlugin yapılandırma tablosu ve ScrollSmoother sarmalayıcı DOM yapısı.
  5. DOM / UIFlip durum yakalama ve from değişkenleri, Draggable seçenekleri, Inertia takibi, Observer hareketleri.
  6. Metinİpuçları ve dikkat edilmesi gerekenlerle birlikte SplitText.create değişkenler tablosu, ayrıca ScrambleText glitch
Skill'in Kendi Açıklaması
GSAP eklentileri için resmi GSAP skill'i — kayıt, ScrollToPlugin, ScrollSmoother, Flip, Draggable, Inertia, Observer, SplitText, ScrambleText, SVG ve fizik eklentileri, CustomEase, EasePack, CustomWiggle, CustomBounce, GSDevTools. Kullanıcı bir GSAP eklentisi, scroll-to, flip animasyonları, draggable, SVG çizimi veya eklenti kaydı hakkında sorduğunda kullanın.

SKILL.md'den ön bilgi açıklaması. Dosyanın tamamı yaklaşık 21.477 karakterdir. Dosyanın tamamını GitHub'da okuyun.

GSAP Plugins

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

gsap-plugins skill'i OpenDesign içinde gelir. Uygulamayı indirin, Plugins → Skills'ten 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-plugins