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

GSAP Timeline Skill.

Claude Code ve Codex için hareket ve video skill'i: GSAP zaman çizelgeleri: konum parametresi, iç içe geçme ve oynatma kontrolü.

  • Motion & Video
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
greensock/gsap-skills · skills/gsap-timeline/SKILL.mdSKILL.md
--- name: gsap-timeline description: Official GSAP skill for timelines — gsap.timeline(), position parameter, nesting, playback. Use when sequencing animations, choreographing keyframes, or when the user asks about animation sequencing, timelines, or animation order (in GSAP or when recommending a library that supports timelines). --- ## When to Use This Skill ## Creating a Timeline ## Position Parameter ## Timeline Defaults ## Timeline Options (constructor) ## Labels
Ön bilgi ve bölüm başlıkları kaynak dosyadan okundu 2026-09-14 · tam hâli 4.338 karakter

01 Ne yapar

gsap-timeline Skill'inin Claude Code ve Codex'te Yaptığı

Ö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

gsap.timeline() ile animasyonları sıralamak için resmi bir GSAP skill'i. Bir zaman çizelgesi oluşturmayı ve varsayılan olarak arka arkaya eklenen tween'leri zincirlemeyi, ardından bunları position parametresiyle -mutlak saniyeler, bağıl "+=0.5"/"-=0.2" ofsetleri, etiketler ve "<"/">" yerleşimiyle- yeniden konumlandırmayı kapsar.

Zaman çizelgesi kurucu seçeneklerini (paused, repeat, yoyo, onComplete/onStart/onUpdate, defaults), addLabel() ile etiketlemeyi ve play()/tweenFromTo() ile seek yapmayı, alt zaman çizelgelerini bir master içine yerleştirmeyi ve restart, time, progress ve kill dahil oynatma yöntemlerini belgeler. GSAP en iyi uygulamaları ve kaçınılması gereken tuzaklarla sona erer; özellikle delay ile zincirleme ve ScrollTrigger'ı bir zaman çizelgesi içindeki tween'lere koyma.

Neler üretir

  • Her örnekte tl olarak geçen, bir değişkende saklanan zaman çizelgesi nesnesi; zincirlenen tween'ler buna eklenir ve oynatma yöntemleri bunun üzerinde işlem yapar.
  • tweenFromTo tarafından döndürülen, zaman çizelgesi duraklatılmışken oynatma başlığını iki etiket arasında hiçbir ease olmadan hareket ettiren yeni bir Tween.
  • Sonlandırılmış bir zaman çizelgesi: kill() çağrısı zaman çizelgesini ve varsayılan olarak alt öğelerini de kaldırır.
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Bir Zaman Çizelgesi Oluşturma ve Tween'leri Zincirleme

    gsap.timeline() çağırın ve .to() çağrılarını zincirleyin. Herhangi bir position verilmediğinde, her tween öncekinin bitiminden sonra eklenir, dolayısıyla sıra yazdığınız sıradır.

  2. 02
    Her Tween'i Zamanda Yerleştirme

    Yerleşim, üçüncü argüman veya vars içindeki bir position özelliği ile ayarlanır: mutlak saniyeler, bağıl ofsetler, etiket adları veya en son eklenen animasyona göre < ve >.

  3. 03
    Zaman Çizelgesine Ortak Varsayılanlar Verme

    Zaman çizelgesi kurucusuna verilen varsayılanlar her alt tween'e birleştirilir, böylece duration ve ease tüm dizi için bir kez tanımlanır.

  4. 04
    Önemli Anları Etiketleyin

    addLabel(), zaman çizelgesinde adlandırılmış bir noktayı işaretler; bu etiket, sonraki tween'ler için ham bir sayı yerine konum hedefi olarak kullanılabilir.

  5. 05
    Zaman Çizelgelerini Bir Ana Zaman Çizelgesinin İçine Yerleştirin

    Bir ana zaman çizelgesi, alt bir zaman çizelgesini tek bir birim olarak alıp belirli bir zamana yerleştirebilir; sonraki tween'ler buna göre eklenir.

  6. 06
    Tüm Sekansı Bir Kerede Yönetin

    Zaman çizelgesi oluşturulduktan sonra, tween tween değil, tek bir birim olarak oynatılır ve duraklatılır.

02 Uyumunuzu bulun

gsap-timeline Skill'i Ne Zaman Kullanmalı

Claude Code veya Codex'te bu tür hareket ve video işleri için gsap-timeline skill'ini kullanın. Uygunluk ve sınırlar skill'in kendi dosyasından alınmıştır.

İyi Uyum

  • Birden çok tween'in sıralı veya paralel olarak çalışması gereken çok adımlı bir animasyon oluşturmak.
  • Kullanıcı GSAP'te zaman çizelgeleri, sıralama veya keyframe tarzı animasyon hakkında soru sorduğunda.
  • Kaydırmayla yönlendirilen zaman çizelgeleri; dosya bunu scroll-trigger skill'iyle eşleştirir.

Sınırları Bilin

  • Tek bir tween veya kendi başına bir ease kapsam dışıdır; dosya bunu core skill'ine yönlendirir.

Ne Sağlamalısınız

  • Her alt tween için bir hedef ve varsZincirlenen her .to() çağrısı bir seçici ve bir vars nesnesi alır; zaman çizelgesi bunları tek bir sekansta birleştirir.
  • Zaman çizelgesi düzeyinde repeat ve yoyorepeat ve yoyo, tween'lerdeki gibi davranır ancak tek bir tween'e değil, tüm zaman çizelgesine uygulanır.
  • Zaman çizelgesi düzeyinde callback'leronComplete, onStart ve onUpdate zaman çizelgesi düzeyinde geçirilir, böylece sekansın bütünü için tetiklenirler.

03 Skill'in içinde

gsap-timeline 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. Delay ile Zincirleme Yok

    Bir zaman çizelgesi animasyonları sıralayabiliyorsa, animasyonları delay ile zincirlemeyin; dosya çok adımlı animasyon için gsap.timeline() ve position parametresine yönlendirir.

  2. Tahmin Etmek Yerine Position Parametresi

    Tween'leri belirli zamanlara veya etiketlere göre yerleştirmek için her zaman üçüncü argüman olan position parametresini kullanın.

  3. Etiketlerinize İsim Verin

    Sıralamanın okunabilir ve sürdürülebilir kalması için addLabel() ile etiketler ekleyin.

  4. Constructor'da Varsayılanlar

    Alt tween'lerin her tween'de tekrarlamak yerine duration, ease ve benzeri vars'ı devralması için varsayılanları zaman çizelgesi constructor'ına geçirin.

  5. ScrollTrigger Zaman Çizelgesine Konur

    ScrollTrigger'ı zaman çizelgesine veya üst düzey tween'e koyun, asla bir zaman çizelgesinin içindeki tween'lere koymayın.

  6. Bir ScrollTrigger Animasyonunu Asla İç İçe Yerleştirmeyin

    ScrollTrigger içeren animasyonlar iç içe yerleştirilmemelidir; ScrollTrigger'lar yalnızca üst düzey Tween'lerde veya Timeline'larda bulunmalıdır.

  7. Constructor Süresi, Dizi Uzunluğu Değildir

    Timeline constructor'daki süreyi tween süresi olarak okumayın — dosya bunu yaygın bir hata olarak tanımlıyor.

  8. Varsayılan Yerleşimi Bilin

    ">" işareti, en son eklenen animasyon sona erdiğinde bir tween'i başlatır ve varsayılan yerleşimdir; "<" ise o animasyonun başlangıcına hizalar.

04 İşe koyun

gsap-timeline'ı Claude Code veya Codex'e Yükleyin

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

gsap-timeline'ı 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-timeline

skills/gsap-timeline/SKILL.md için genel skills CLI formu; 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 sequencing a [hero banner] animation: [the headline] slides up, then [the CTA button] appears 0.5s later, and [the product shot] scales in at the same start time as the button. I want shared duration and ease defaults on the timeline, and labels for the intro and outro so I can play from either one.

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:

  • tl.time(2) ile oynatma başlığını belirli bir saniyeye getirin ve her tween'in position parametresinin belirttiği yerde başladığını doğrulayın.
  • Varsayılan değerlerin gerçekten alt öğelere ulaştığını kontrol edin: dosyadaki örnekte her iki tween de 0.5s ve power2.out kullanıyor, bunları tekrar belirtmeden.
  • Bir label adından oynatarak label'ın beklediğiniz zamanda eklendiğini doğrulayın.
  • Diziyi tersten önizlemek için reverse kullanın; dosyada timeline'ın tam tersten oynaması için reverse()'den önce progress(1) gösteriliyor.

OpenDesign'da gsap-timeline birlikte gelir: 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-timeline/SKILL.md İçerik sağlama toplamı doğrulamada kaydedildi; commit aed9cfd
License
MIT LICENSE dosyasından; SKILL.md "MIT" diyor.
Repository yıldızları
15.248 Bu katalogda 8 skill içeren tüm greensock/gsap-skills deposu için 2026-09-14 tarihinde alınan GitHub görüntüsü. gsap-timeline 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ırÇok adımlı animasyon ve sıralama için geçerlidir; core, scroll-trigger ve React skill'lerine çapraz referans verir.
  2. Bir Timeline OluşturmaZincirlenmiş .to() çağrılarıyla gsap.timeline(); tween'ler yeniden konumlandırılmadıkça varsayılan olarak sona eklenir.
  3. Position ParametresiÜçüncü argüman veya vars özelliği: mutlak, bağıl kaymalar, label'lar ve açılı ayraç yerleşimi.
  4. Timeline VarsayılanlarıTimeline constructor'a geçirilen varsayılanlar her alt tween tarafından devralınır.
  5. Timeline Seçenekleri (constructor)paused, repeat, yoyo, timeline düzeyinde geri çağırmalar ve alt öğelere verilen defaults nesnesi.
  6. Label'laraddLabel(), ardından etiketli noktalardan başlamak için play() ve tweenFromTo().
  7. Timeline'ları İç İçe YerleştirmeBir ana timeline, master.add(child, 0) aracılığıyla alt timeline'lar içerebilir.
  8. Oynatmayı Kontrol EtmeTimeline için play, pause, reverse, restart, time, progress ve kill listelenmiştir.
  9. Resmi GSAP En İyi UygulamalarıBeş onay işaretli uygulama: delay'ler yerine timeline'lar, position parametresi, label'lar, defaults, üst düzey ScrollTrigger.
  10. YapmayınDelay zincirlemesi, atlanmış defaults ve iç içe ScrollTrigger'lar dahil dört çarpı işaretli hata.
Skill'in Kendi Açıklaması
"Zaman çizelgeleri için resmi GSAP skill'i — gsap.timeline(), pozisyon parametresi, iç içe yerleştirme, oynatma. Animasyonları sıralarken, keyframe'leri koreografiye ederken veya kullanıcı GSAP'te animasyon sıralaması, zaman çizelgeleri veya animasyon sırası hakkında sorduğunda (veya zaman çizelgelerini destekleyen bir kütüphane önerirken) kullanın."

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

06 Kurmadan önce

gsap-timeline 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.

Ben tetiklemeden başlamayan bir timeline nasıl oluştururum?

Timeline'ı paused: true ile constructor'da oluşturun; bu, timeline'ı duraklatılmış bırakır, ardından çalışmasını istediğinizde .play() çağırın.

GSAP Timeline

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

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