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

GSAP Utils Skill.

Claude Code ve Codex için hareket ve video skill'i: gsap.utils yardımcıları: clamp, mapRange, interpolate, snap, wrap, pipe.

  • Motion & Video
  • UI kodu
OpenDesign İndirKullanım kılavuzunu görüntüle
greensock/gsap-skills · skills/gsap-utils/SKILL.mdSKILL.md
--- name: gsap-utils description: Official GSAP skill for gsap.utils — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Use when the user asks about gsap.utils, clamp, mapRange, random, snap, toArray, wrap, or helper utilities in GSAP. --- ## When to Use This Skill ## Clamping and Ranges ## Random and Snap ## Units and Parsing ## Arrays and Collections ## Best practices
Ön bilgi ve bölüm başlıkları kaynak dosyadan okundu 2026-09-14 · tam hâli 12.051 karakter

01 Ne yapar

gsap-utils Skill'i Claude Code ve Codex İçinde 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

gsap.utils, GSAP'in matematik, aralık, birim, renk ve koleksiyonlar için saf yardımcı fonksiyon setidir ve herhangi bir kayıt gerektirmez. Skill, clamp, mapRange, normalize, interpolate, random, snap, shuffle, distribute, getUnit, unitize, splitColor, selector, toArray, pipe, wrap ve wrapYoyo fonksiyonlarını imzaları, varsayılanları ve işlenmiş çıktı örnekleriyle belgeler.

Bu, kaydırmayı bir değere eşlemesi, girdileri normalize etmesi, bir ızgaraya snap etmesi veya bir bileşende seçicileri kapsamlaması gereken GSAP kodu yazan veya inceleyen geliştiriciler içindir. Dosya boyunca tek bir kalıp geçerlidir: yeniden kullanılabilir bir fonksiyon elde etmek için sondaki değeri atlayın; random() bunun istisnasıdır, o true alır.

Neler üretir

  • Değer argümanını geçtiğinizde doğrudan döndürülen dönüştürülmüş değer
  • Daha sonra kendisine verdiğiniz değerleri sıkıştıran, eşleyen, normalize eden veya snap eden yeniden kullanılabilir bir fonksiyon
  • Aynı elemanların rastgele sıralandığı yeni bir dizi
  • Yalnızca belirtilen eleman veya ref içindeki elemanları bulan kapsamlı bir seçici fonksiyonu
Örnek istemi görün ↗

Nasıl Çalışır

  1. 01
    Yardımcılar gsap.utils Üzerinde Yaşar

    Bu yardımcılar, kayıt gerektirmeyen ve JS'in GSAP'i yönlendirdiği her yerde çağrılabilen saf yardımcılardır: tween değişkenleri, ScrollTrigger veya Observer callback'leri.

  2. 02
    Değeri Son Olarak Geçin, Sonucu Şimdi Alın

    Yardımcıların çoğu önce yapılandırmasını, ardından dönüştürülecek değeri son argüman olarak alır ve dönüştürülmüş sonucu hemen döndürür.

  3. 03
    Fonksiyon Formu İçin Bunu Atlayın

    O son değeri atlarsanız, yardımcı size daha sonra değerle çağırabileceğiniz bir fonksiyon verir, böylece tek bir yapılandırma birçok değere hizmet edebilir.

  4. 04
    Random()'ın Kalıbı Tersine Çevirdiğini Unutmayın

    random(), yeniden kullanılabilir formu için atlama kullanmaz; son argüman olarak true geçersiniz ve her çağrıda yeni bir değer döndüren bir fonksiyon alırsınız.

  5. 05
    Snap, Tween'in Kendisinde Ayarlanabilir

    Izgara veya adım tabanlı hareket için, önce yardımcıyı çağırmak yerine snap'i doğrudan tween değişkenlerinde geçebilirsiniz.

  6. 06
    Pipe ile Dönüşümleri Zincirleyin

    pipe, fonksiyonları soldan sağa birleştirir, böylece normalize edip sonra snap etmek, bir tween veya callback içinde tek bir fonksiyon olarak uygulanabilir.

02 Uyumunuzu bulun

gsap-utils Skill Ne Zaman Kullanılır

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

İyi Uyum

  • Kaydırma konumunu, 0-1 ilerleme değerini veya başka bir girdi aralığını bir animasyon aralığına dönüştürme
  • Bir tween içinde bir ızgarada veya sabit adımlarla animasyon oluşturma
  • wrap ve wrapYoyo ile sonsuz kaydırma veya diğer döngüsel değer işleme
  • Scale, opacity, x veya delay gibi değerleri birçok eleman üzerinde tek seferde yayma
  • Sıralamaya sokmadan önce öğelerin sırasını rastgeleleştirme

Sınırları Bilin

  • CustomEase gibi kolaylaştırma (easing) araçları; dosya bunları gsap.utils yerine gsap-plugins içine yerleştirir
  • utils'i geçersiz kılmak veya belgelenmemiş davranışlara güvenmek
  • Animasyonun kendisini oluşturmak; dosya bunu gsap-core, gsap-timeline ve gsap-scrolltrigger ile eşleştirir

Ne Sağlamalısınız

  • Dönüştürmek istediğiniz değerSonucu hemen almak için bunu son argüman olarak geçirin; atlarsanız değeri daha sonra elde ettiğiniz fonksiyona verin.
  • selector() için bir kapsam öğesi veya refDöndürülen selector fonksiyonunun yalnızca onun alt öğeleriyle eşleşmesi için bir DOM öğesi veya framework ref'i geçirin.
  • splitColor için bir renk dizesirgb(), rgba(), hsl(), hsla(), hex ve adlandırılmış renklerin tümü çalışır; HSL bileşenlerini almak için ikinci argüman olarak true geçirin.
  • Tüm anahtarları isteğe bağlı olan bir distribute yapılandırmasıbase, amount veya each, from, grid, axis ve ease gibi yayılım ayarlarını sağlayın, ya da varsayılanlar için boş bırakın.

03 Skill'in içinde

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

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

  1. Bir Aralık Tekrarlandığında Değeri Atlayın

    Aynı aralık veya yapılandırmanın, bir kaydırma işleyicisi veya tween geri çağırması gibi tekrar kullanıldığı yerlerde, her çağrıda yapılandırmayı yeniden kurmak yerine döndürülen fonksiyonu saklayın.

  2. Tween Değişkenlerinde Rastgele Dize Biçimini Kullanın

    Bir özellik değeri olarak "random(-100, 100)", "random(-100, 100, 5)" veya "random([0, 100, 200])" yazın; GSAP dizeyi her hedef için değerlendirir.

  3. Izgaraları Snap'leyin, Kalanı toArray Yapın

    Izgaraya hizalı veya adım tabanlı değerler için snap'i kullanın ve GSAP veya kendi kodunuzun bir selector veya NodeList'ten gerçek bir dizi ihtiyacı olduğu her durumda toArray kullanın.

  4. Bileşenlerin İçinde Selector'ları Kapsamlandırın

    gsap.utils.selector(scope)'u çağırarak ".box" gibi bir selector'ın tüm belge yerine yalnızca o kapsayıcının veya ref'in alt öğeleriyle eşleşmesini sağlayın.

  5. Amount veya Each, Asla İkisi Birden

    Bir distribute yapılandırmasında amount, toplamı tüm hedefler arasında böler (100 hedef üzerinden amount 1, 0.01 aralık demektir), each ise her hedef için 0, 1, 2, 3 gibi sabit bir adım belirler.

  6. mapRange ve Normalize Yalnızca number İçindir

    Birimleri işlemelerini beklemeyin; birimler önemli olduğunda bunun yerine getUnit veya unitize'a başvurun.

04 İşe koyun

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

skills/gsap-utils/SKILL.md için genel skills CLI biçimi; depo kendi yolunu belgelemiş olabilir.

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
Use gsap.utils to drive a [scroll-linked effect] in [my component]: map the ScrollTrigger progress from 0-1 to 0-360 and snap the result to the nearest 5, then set the starting x of each [card] with the string form "random(-100, 100, 5)". Scope the selectors to the [container] ref with gsap.utils.selector so they do not match the whole document.

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:

  • Bir örnek çağrıyı belgelenen sonuçla karşılaştırın, örneğin mapRange(0, 100, 0, 500, 50) 250 verir
  • Döngüsel sonucu doğrulamak için wrap'i aralığın her iki ucunda test edin
  • Kapsamlı bir sonucu doğrulamak için toArray'in ikinci argümanı olarak bir kapsayıcı geçirin
  • Bir RGBA rengin üç değil dört öğe döndürdüğünü kontrol edin
  • getUnit'in birim dizesini döndürdüğünü, birimsiz sayılar için ise boş dize döndürdüğünü doğrulayın

OpenDesign'da gsap-utils 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-utils/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 katalogda 8 skill içerir. gsap-utils 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'in Kendi Açıklaması
"gsap.utils için resmi GSAP skill'i — clamp, mapRange, normalize, interpolate, random, snap, toArray, wrap, pipe. Kullanıcı gsap.utils, clamp, mapRange, random, snap, toArray, wrap veya GSAP'teki yardımcı araçlar hakkında sorduğunda kullanın."

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

GSAP Utils

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

gsap-utils 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-utils