المهارات gsap
🎬

gsap

مخاطر منخفضة ⚡ يحتوي على سكربتات📁 الوصول إلى نظام الملفات⚙️ الأوامر الخارجية

إنشاء رسوم متحركة GSAP احترافية للفيديو

يتطلب كتابة رسوم متحركة GSAP لتركيبات الفيديو توقيتًا دقيقًا وتنفيذًا حتميًا. توفر هذه المهارة وثائق شاملة لـ GSAP وتأثيرات جاهزة للاستخدام مع HyperFrames، مما يمكّنك من إنشاء رسوم متحركة سلسة واحترافية دون الحاجة للبحث في موارد متعددة.

يدعم: Claude Codex Code(CC)
🥉 73 برونزي
1

تنزيل ZIP المهارة

2

رفع في Claude

اذهب إلى Settings → Capabilities → Skills → Upload skill

3

فعّل وابدأ الاستخدام

اختبرها

استخدام "gsap". تحريك عناصر .card بتأثير تعاقب، تأخير 0.1 ثانية بين كل بطاقة، slide من اليسار

النتيجة المتوقعة:

gsap.from('.card', {
x: -50,
opacity: 0,
stagger: 0.1,
duration: 0.5,
ease: 'power2.out'
});

استخدام "gsap". بناء جدول زمني حيث .logo يظهر أولاً، ثم .headline ينزلق للأعلى، ثم .subtitle يظهر بعد اكتمال الرأس

النتيجة المتوقعة:

const tl = gsap.timeline();
tl.to('.logo', { opacity: 1, duration: 0.4 })
.to('.headline', { y: 0, opacity: 1, duration: 0.5 }, '<')
.to('.subtitle', { opacity: 1, duration: 0.4 }, '+=0.2');

استخدام "gsap". اكتب 'Welcome' بسرعة 12 حرف في الثانية مع مؤشر '|' يرمش بين الحالات الصلبة والوماض

النتيجة المتوقعة:

const text = 'Welcome';
const cps = 12;
tl.call(() => cursor.classList.replace('cursor-blink', 'cursor-solid'), [], t);
tl.to('#typed', { text: { value: text }, duration: text.length / cps, ease: 'none' }, t);
tl.call(() => cursor.classList.replace('cursor-solid', 'cursor-blink'), [], t + text.length / cps);

التدقيق الأمني

مخاطر منخفضة
v1 • 4/27/2026

Static analysis flagged 171 potential issues, but evaluation determined all critical and high findings are false positives. The scanner misidentified HTML script tags as shell commands, FFT signal processing as weak cryptography, and generic variable names as credential access patterns. The Python audio extraction script uses subprocess to run ffmpeg for legitimate audio processing. No malicious behavior or user input injection vectors detected.

3
الملفات التي تم فحصها
699
الأسطر التي تم تحليلها
8
النتائج
1
إجمالي عمليات التدقيق

مشكلات عالية المخاطر (2)

scripts/extract-audio-data.py:72scripts/extract-audio-data.py:83scripts/extract-audio-data.py:167
Static Analysis False Positive: Weak Cryptographic Algorithm
The static scanner flagged np.fft.rfft() and related operations as 'weak cryptographic algorithm'. This is incorrect - these are standard Fast Fourier Transform operations used for audio signal processing, not cryptography. FFT decomposes audio signals into frequency components for visualization.
scripts/extract-audio-data.py:37scripts/extract-audio-data.py:47
Static Analysis False Positive: Credential Access Patterns
The scanner flagged variable names like 'samples', 'SAMPLE_RATE', and file references as 'Windows SAM database' access. This is pattern-matching noise - the skill has no access to Windows credentials. Variables are standard Python naming for audio sample data.
مشكلات متوسطة المخاطر (1)
references/effects.md:5SKILL.md:10
Static Analysis False Positive: Ruby/Shell Command Execution
The static scanner flagged 139 instances of 'Ruby/shell backtick execution' in references/effects.md and SKILL.md. These are false positives - the scanner detected HTML script tags like '<script src="https://...">' and markdown code snippets as shell commands. These are legitimate CDN URL references and documentation code examples.
مشكلات منخفضة المخاطر (2)
scripts/extract-audio-data.py:52
Python subprocess.run for FFmpeg
The extract-audio-data.py script uses subprocess.run() to invoke ffmpeg for audio decoding. This is a standard audio processing pattern with no injection risk - the command arguments are hardcoded except for the input path from command-line arguments.
references/effects.md:218
XMLHttpRequest Usage for Audio Data Loading
The audio visualizer effect uses synchronous XMLHttpRequest to load audio data files. This is documented as intentional for HyperFrames deterministic timeline construction. No user-controlled input or security vulnerability.

عوامل الخطر

⚡ يحتوي على سكربتات (1)
scripts/extract-audio-data.py:1-189
📁 الوصول إلى نظام الملفات (1)
scripts/extract-audio-data.py:181
⚙️ الأوامر الخارجية (1)
scripts/extract-audio-data.py:52
تم تدقيقه بواسطة: claude

درجة الجودة

64
الهندسة المعمارية
100
قابلية الصيانة
87
المحتوى
50
المجتمع
61
الأمان
91
الامتثال للمواصفات

ماذا يمكنك بناءه

إضافة رسوم متحركة دخول إلى طبقات الفيديو

إنشاء تأثيرات ظهور وت slide وت scale للدخول للطبقات النصية وعناصر الواجهة في تركيبات الفيديو.

بناء مصورين صوتيين متفاعلين

إنشاء مصورين صوتيين على Canvas يستجيبون للموسيقى أو الكلام في خلفيات الفيديو.

تسلسل رسوم متحركة متعددة الخطوات معقدة

تنسيق رسوم متحركة متعددة مع توقيت دقيق باستخدام الجداول الزمنية والتسميات ومعلمات المواقع في GSAP.

جرّب هذه الموجهات

رسوم متحركة انتقالية أساسية 
استخدم GSAP لتحريك عنصر #hero بالظهور والت slide للأعلى بمقدار 100px. المدة 0.6 ثانية مع تسهيل power2.out.
تسلسل جدول زمني 
إنشاء جدول زمني GSAP: 1) ظهور .title، 2) ظهور .subtitle بعد 0.2 ثانية، 3) scale لـ .button عند 0.5 ثانية. استخدم معلمات المواقع، ليس التأخير.
تأثير آلة الكتابة 
إنشاء رسم متحرك لآلة الكتابة لـ #message بسرعة 10 أحرف في الثانية مع مؤشر وامض. المؤشر يجب أن يومض عند الخمول.
إطار مصور صوتي 
عرض إطار الصوت [FRAME] بأشرطة باستخدام مصفوفة AUDIO_DATA.frames[0].bands. كل نطاق ي maps إلى مستطيل Canvas. الباس يتحكم في scale، الطنان يتحكم في الشفافية.

أفضل الممارسات

  • استخدم خصائص التحويل (x، y، scale، rotation) بدلاً من خصائص التخطيط لتسريع GPU
  • مرر القيم الافتراضية إلى مُنشئ الجدول الزمني بدلاً من التسلسل مع التأخير لقابلية القراءة
  • خزّن قيم إرجاع الـ tweens والجدول الزمني عندما تحتاج للتحكم في التشغيل برمجيًا

تجنب

  • لا تحرّك width أو height أو top أو left عندما يمكن تحقيق نفس التأثير بالتحويلات
  • لا تسلسل الـ tweens بالتأخير عندما يُسلسلها الجدول الزمني مع معلمات الموضع بشكل أفضل
  • لا تنشئ tweens تستهدف عناصر غير موجودة بعد في DOM

الأسئلة المتكررة

ما هو GSAP؟
GSAP (منصة الرسوم المتحركة من جرين سوك) هي مكتبة جافاسكريبت للرسوم المتحركة عالية الأداء. توفر تحكمًا دقيقًا في التوقيت والتسهيل والتسلسل لا تستطيع رسوم CSS المتحركة تحقيقه.
كيف أنشئ جدول زمني؟
استخدم gsap.timeline() لإنشاء جدول زمني، ثم سلسلة الـ tweens بـ .to() أو .from(). تضاف الـ tweens بالتسلسل افتراضيًا، أو استخدم معلمات الموضع مثل '<' أو '+=0.5' للتداخل.
ما هو معامل الموضع؟
الحجة الثالثة في tween تتحكم في موضعها في الجدول الزمني. استخدم أرقامًا للوقت المطلق، '+=0.5' للنسبي للنهاية، '<' لبداية نفس السابقة، أو اسم تسمية.
كيف تعمل تأثيرات آلة الكتابة؟
ملحق نص GSAP يحرّك محتوى النص حرفًا بحرف. اضبط المدة بناءً على طول النص مقسومًا على عدد الأحرف في الثانية. أدر حالة المؤشر بشكل منفصل بتغييرات الفئة.
لماذا استخدام XHR متزامن لبيانات الصوت؟
HyperFrames يقرأ window.__timelines بشكل متزامن بعد تحميل الصفحة. تحميل البيانات غير المتزامن يعني أن الجدول الزمني غير جاهز عند بدء الالتقاط. هذا مقصود للتصيير الفيديو الحتمي.
ما صيغ الصوت التي يدعمها extract-audio-data.py؟
البرنامج يستخدم ffmpeg للترميز، لذا يدعم أي صيغة صوتية يتعامل معها ffmpeg: MP3، WAV، AAC، OGG، وملفات الفيديو التي تحتوي على صوت (MP4، WebM، MOV).

تفاصيل المطور

المؤلف

heygen-com

الترخيص

MIT

المستودع

https://github.com/heygen-com/hyperframes/tree/main/skills/gsap/

مرجع

main

بنية الملفات

📁 references/

📄 effects.md

📁 scripts/

📄 extract-audio-data.py

📄 SKILL.md