gsap-framer-scroll-animationyazan GitHub

GSAP Framer Scroll Animation Skill.

Claude Code ve Codex için hareket ve video skill'i: paralaks, sabitlenmiş bölümler, yatay kaydırma ve metin kaydırma animasyonları.

Motion & Video
UI kodu

OpenDesign İndir Kullanım kılavuzunu görüntüle

github/awesome-copilot · skills/gsap-framer-scroll-animation/SKILL.mdSKILL.md

--- name: gsap-framer-scroll-animation description: - Use this skill whenever the user wants to build scroll animations, scroll effects, parallax, scroll-triggered reveals, pinned sections, horizontal scroll, text animations, or any motion tied to scroll position — in vanilla JS, React, or Next.js. Covers GSAP ScrollTrigger (pinning, scrubbing, snapping, timelines, horizontal scroll, ScrollSmoother, matchMedia) and Framer Motion / Motion v12 (useScroll, useTransform, … --- ## Quick Library Selector ## Setup (Always Do First) ## Workflow ## The 5 Most Common Scroll Patterns ## Critical Rules (Apply Always) ## Copilot Prompting Tips

Ön bilgi ve bölüm başlıkları 2026-09-14 tarihinde kaynak dosyadan okunmuştur · tam hali 6.365 karakter

01 Ne yapar

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

Bu skill, GSAP ScrollTrigger ve Framer Motion kullanarak üretim kalitesinde kaydırma animasyonları uygular. Parallax efektlerini, kaydırmayla tetiklenen ortaya çıkışları, sabitlenmiş (pinned) bölümleri, yatay kaydırmayı ve vanilla JavaScript, React ve Next.js projeleri için metin animasyonlarını kapsar. Skill, GSAP (vanilla JS, Webflow, Vue, pinning ve karmaşık zaman çizelgeleri için) ile Framer Motion (React/Next.js bildirimsel stil için) arasında seçim yapmak üzere bir Hızlı Kütüphane Seçici içerir.

Kullanıma hazır kod tarifleri, ayrı referans dosyalarında eksiksiz API referansları ve Copilot prompt kalıpları sağlar. Bu skill, ne zaman ve neden animasyon uygulanacağını yönlendiren yaratıcı felsefeyi ve tasarım ilkelerini sunan premium-frontend-ui skill'i ile birlikte kullanılır.

Neler üretir

Kullanıma hazır kod tarifleriyle üretim kalitesinde kaydırma animasyonları

Örnek istemi görün ↗

Nasıl Çalışır

01
Niyeti Yorumlayın ve Kütüphane Seçin
Skill, önce kullanıcının isteğine ve proje bağlamına göre GSAP ya da Framer Motion'ın en uygun seçim olup olmadığını belirler.
02
Referans Belgelerini Okuyun
Ayrıntılı API'ler ve uygulama kalıpları için references dizinindeki ilgili referans belgesine başvurulur.
03
Paket Kurulumunu Önerin
Gerekli npm paketleri, projede henüz mevcut değilse önerilir.
04
Animasyon İskeletini Uygulayın
Animasyon yapısı, istenen formatta iskeletlenir; bu React bileşenleri, hook'lar veya vanilla JavaScript olabilir.
05
Erişilebilirlikle Birlikte Araçları Uygulayın
Doğru kaydırma veya görünür alan (in-view) araçları uygulanır; erişilebilirlik seçeneklerinin mevcut olduğundan ve hook'ların sonsuz yeniden render'a neden olmadığından emin olunur.

02 Uyumunuzu bulun

gsap-framer-scroll-animation Skill Ne Zaman Kullanılır

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

İyi Uyum

Vanilla JS, React veya Next.js'te kaydırma animasyonları, kaydırmayla tetiklenen ortaya çıkışlar, parallax efektler, sabitlenmiş bölümler, yatay kaydırma veya metin animasyonları oluşturma
'Kaydırırken animasyon yap', 'kaydırırken belir', 'Apple gibi kaydırmasını yap', 'parallax efekti', 'yapışkan bölüm' veya 'giriş animasyonu' gibi kullanıcı istekleri
Copilot prompt kalıplarıyla GSAP veya Framer Motion kodu üretme

Sınırları Bilin

GSAP gerektirirSKILL.md bu bağımlılığı belirtir; beceri projenizde GSAP olmadan çalışmaz.

Ne Sağlamalısınız

Tam seçici, temel görsel ve kaydırma aralığıCopilot'un baştan eksiksiz seçiciye, temel görsele ve kaydırma aralığına ihtiyacı vardır çünkü belirsiz promptlar belirsiz kod üretir.
GSAP'a özgü parametrelerGSAP uygulamaları için seçiciyi, başlangıç/bitiş dizelerini ve scrub ya da toggleActions istenip istenmediğini belirtin.
Framer Motion'a özgü parametrelerFramer uygulamaları için hangi hook'un kullanılacağını (useScroll veya whileInView), offset değerlerini ve neyin dönüştürüleceğini belirtin.
Tam hata mesajlarıCopilot'tan sorunları düzeltmesini isterken, çok daha iyi düzeltmeler için tam hata mesajını yapıştırın.

03 Skill'in içinde

gsap-framer-scroll-animation Skill'in 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ı.

Önce ScrollTrigger Eklentisini Kaydedin
GSAP, herhangi bir ScrollTrigger özelliğini kullanmadan önce gsap.registerPlugin(ScrollTrigger) çağrısı yapılmasını gerektirir.
Scrub ile Ease None Kullanın
GSAP'ta scrub etkinken her zaman ease: 'none' kullanın çünkü scrub yapılırken easing yanlış hissettirir.
React'te useGSAP Kullanın
React'te, düz useEffect yerine @gsap/react'ten useGSAP kullanın çünkü ScrollTrigger'ları otomatik olarak temizler.
İşaretleri Yalnızca Geliştirme Sırasında Ekleyin
GSAP hata ayıklama işaretleri geliştirme sırasında markers: true ile eklenmeli, ancak üretime geçmeden önce kaldırılmalıdır.
useTransform Çıkışı Style Prop'a Gider
Framer Motion useTransform çıkışı, düz bir div'e değil, bir motion.* öğesinin style prop'una yerleştirilmelidir.
Next.js'te Use Client Yönergesini Ekleyin
Motion hook'ları kullanan herhangi bir Next.js dosyasının başında 'use client' bulunmalıdır.
Sadece Transform ve Opacity'yi Animasyonlandırın
Yalnızca transform ve opacity özelliklerini animasyonlandırın. Performans için width, height veya box-shadow'u animasyonlandırmaktan kaçının.
prefers-reduced-motion'ı Kontrol Edin
Erişilebilirlik ihtiyaçlarına uymak için her zaman prefers-reduced-motion kullanıcı tercihini kontrol edin.

04 İşe koyun

Claude Code veya Codex'e gsap-framer-scroll-animation Kurma

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

Claude Code, Codex veya Ajanınıza gsap-framer-scroll-animation Ekleme

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

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

skills/gsap-framer-scroll-animation/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

Create a pinned hero section with a parallax background image that scales and fades as I scroll down. The hero should pin for 200% of viewport height, with the image starting at scale 1 and ending at 1.3 while opacity drops to 0. Add a fade-in for the headline text that appears after 30% of the scroll range. Use [hero-background.jpg] as the image source.

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:

Herhangi bir ScrollTrigger kullanımından önce gsap.registerPlugin(ScrollTrigger)'ın çağrıldığını doğrulayın

OpenDesign'da gsap-framer-scroll-animation'ı SKILL.md bağlantısından içe aktarın: Plugins → Add → Skill → Import from link, ardından üst çubukta seçin.

OpenDesign İndir Hı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: GitHub
Repository: github.com/github/awesome-copilot Dal main
Skill dosyası: skills/gsap-framer-scroll-animation/SKILL.md İçerik sağlaması doğrulama sırasında kaydedildi; commit 1899b18
License: MIT LICENSE dosyasından.
Repository yıldızları: 38.981 GitHub görüntüsü bu katalogda 6 skill içeren github/awesome-copilot deposunun tamamı için 2026-09-14 tarihinde alınmıştır. gsap-framer-scroll-animation için bir derecelendirme 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 dahil değil (2026-08-28 kontrol edildi); bu sayfada canlı bir çalıştırma kaydedilmedi.

SKILL.md içinde

Hızlı Kütüphane SeçiciÇerçeve ve animasyon karmaşıklığına göre kullanım senaryolarını GSAP veya Framer Motion ile eşleştiren tablo
Kurulum (Her Zaman Önce Yapın)Eklenti kaydıyla birlikte GSAP ve Framer Motion için kurulum komutları ve gerekli import'lar
WorkflowErişilebilirlik seçenekleriyle niyeti yorumlamaktan araçları uygulamaya kadar beş adımlı süreç
En Yaygın 5 Scroll DeseniHer iki kütüphanede fade-in, scrub, scroll-linked ve pinned zaman çizelgesi desenleri için kod parçacıkları
Kritik Kurallar (Her Zaman Uygulayın)Eklenti kaydı, easing, React hook'ları, erişilebilirlik ve performans için uyulması gereken sekiz kural
Copilot Prompt İpuçlarıDaha iyi kod üretimi için promptların tam seçicilerle, scroll aralıklarıyla ve hata mesajlarıyla nasıl yapılandırılacağı
Referans DosyalarıTam API referansları ve tarif içerikleriyle gsap.md ve framer.md'yi listeleyen tablo
İlgili Skill'lerNe zaman ve neden animasyon uygulanacağını tanımlayan yaratıcı felsefe eşlikçisi olarak premium-frontend-ui skill'ini listeler

Skill'in Kendi Açıklaması

"- Kullanıcı kaydırma animasyonları, kaydırma efektleri, paralaks, kaydırma tetiklemeli açılmalar, sabitlenmiş bölümler, yatay kaydırma, metin animasyonları veya kaydırma konumuna bağlı herhangi bir hareket oluşturmak istediğinde bu beceriyi kullanın — vanilla JS, React veya Next.js'de. GSAP ScrollTrigger'ı (sabitleme, scrubbing, snapping, timeline'lar, yatay kaydırma, ScrollSmoother, matchMedia) ve Framer Motion / Motion v12'yi (useScroll, useTransform, useSpring, whileInView, variants) kapsar. Kullanıcı sadece \"kaydırma sırasında canlandır\", \"kaydırırken belir\", \"Apple gibi kaydır\", \"paralaks efekti\", \"yapışkan bölüm\", \"kaydırma ilerleme çubuğu\" veya \"giriş animasyonu\" dese bile bu beceriyi kullanın. Ayrıca GSAP veya Framer Motion kod üretimi için Copilot prompt kalıpları için tetiklenir. Yaratıcı felsefe ve tasarım düzeyinde parlaklık için premium-frontend-ui becerisi ile eşleşir."

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

06 Kurmadan önce

gsap-framer-scroll-animation 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.

Projem için GSAP mi yoksa Framer Motion mı kullanmalıyım?

Vanilla JS, Webflow, Vue için ya da pinning, yatay scroll veya karmaşık zaman çizelgelerine gerek duyduğunuzda GSAP kullanın. Deklaratif bir stille React veya Next.js projeleri için, ya da whileInView giriş animasyonları istediğinizde Framer Motion kullanın. İkisi de aynı Next.js uygulamasında bir arada bulunabilir.

GSAP Framer Scroll Animation

gsap-framer-scroll-animation'ı Gerçek Bir Animasyon ve Video Görevinde Çalıştırın.

OpenDesign'ı indirin, gsap-framer-scroll-animation'ı SKILL.md bağlantısından içe aktarın, yukarıdaki prompt'u yapıştırın ve sonuçtan önce planı okuyun.

OpenDesign'ı İndirin Tüm skill'lere göz atın

Terminal

npx skills add https://github.com/github/awesome-copilot --skill gsap-framer-scroll-animation

Claude Code ve Codex'te gsap-framer-scroll-animation Skill'i Ne Yapar

Skill'in Kendi İfadeleriyle

Nasıl Çalışır

gsap-framer-scroll-animation Skill Ne Zaman Kullanılır

İyi Uyum

Sınırları Bilin

Ne Sağlamalısınız

gsap-framer-scroll-animation Skill'in Claude Code ve Codex'e Verdiği Kurallar

Önce ScrollTrigger Eklentisini Kaydedin

Scrub ile Ease None Kullanın

React'te useGSAP Kullanın

İşaretleri Yalnızca Geliştirme Sırasında Ekleyin

useTransform Çıkışı Style Prop'a Gider

Next.js'te Use Client Yönergesini Ekleyin

Sadece Transform ve Opacity'yi Animasyonlandırın

prefers-reduced-motion'ı Kontrol Edin