·awwwards-animations
</>

awwwards-animations

مهارة الرسوم المتحركة التفاعلية الاحترافية لإنشاء رسوم متحركة على مستوى Awwwards/FWA باستخدام GSAP (useGSAP)، وMotion (Framer Motion)، وAnime.js، وLenis. استخدمه عند إنشاء تجارب تمرير متميزة، أو مؤشرات مخصصة، أو انتقالات للصفحة، أو رسوم متحركة نصية، أو تأثيرات اختلاف المنظر، أو التفاعلات الدقيقة، أو أي رسوم متحركة تحتاج إلى أن تكون بمعدل 60 إطارًا في الثانية وتستحق جائزة. مشغلات عند طلبات التمرير السلس، ScrollTrigger، التأثيرات المغناطيسية، كشف الرسوم المتحركة، التمرير الأفقي، أقسام الدبوس، التأثيرات المتداخلة، useScroll، useTransform، التكامل مع Three.js/WebGL، الفن الخوارزمي، الفن الرياضي، الفن التوليدي، الفركتلات، أنظمة L، حقول التدفق، عوامل الجذب الغريبة، الهندسة المقدسة، الألغاز الهندسية، تشريح دوديني، تنغرم، فسيفساء، بلاط بنروز، الحركية الطباعة، أو تأثيرات الخلل، أو انفجار النص، أو تحويل النص، أو النص الدائري، أو التصميم الوحشي، أو الرسوم المتحركة البسيطة، أو الوحشية الجديدة، أو خلط فلسفة التصميم. نهج رد الفعل الأول مع التنظيف المناسب والخطافات.

249التثبيتات·25الرائج·@devmartinese

التثبيت

$npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations

كيفية تثبيت awwwards-animations

ثبّت مهارة الذكاء الاصطناعي awwwards-animations بسرعة في بيئة التطوير لديك عبر سطر الأوامر

  1. افتح الطرفية: افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal
  2. نفّذ أمر التثبيت: انسخ ونفّذ هذا الأمر: npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations
  3. تحقق من التثبيت: بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

المصدر: devmartinese/awwwards-animations-skill.

Create premium web animations at Awwwards/FWA quality level. React-first approach. 60fps non-negotiable.

| Scroll-driven animations | GSAP + ScrollTrigger + useGSAP | Industry standard, best control | | Smooth scroll | Lenis + ReactLenis | Best performance, works with ScrollTrigger | | React-native animations | Motion (Framer Motion) | Native React, useScroll/useTransform | | Simple/lightweight effects | Anime.js 4.0 | Small footprint, clean API |

| Complex timelines | GSAP | Unmatched timeline control | | SVG morphing | GSAP MorphSVG or Anime.js | Both excellent | | 3D + animation | Three.js + GSAP | GSAP controls Three.js objects | | Page transitions | AnimatePresence or GSAP | Motion for React, GSAP for complex | | Geometric shapes (vector) | SVG + GSAP/Motion | Native, animable |

حقائق جاهزة للاقتباس

حقول وأوامر مستقرة للاقتباس في أنظمة الذكاء الاصطناعي والبحث.

أمر التثبيت
npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations
الفئة
</>أدوات التطوير
موثق
أول ظهور
2026-02-11
آخر تحديث
2026-03-10

Browse more skills from devmartinese/awwwards-animations-skill

إجابات سريعة

ما هي awwwards-animations؟

مهارة الرسوم المتحركة التفاعلية الاحترافية لإنشاء رسوم متحركة على مستوى Awwwards/FWA باستخدام GSAP (useGSAP)، وMotion (Framer Motion)، وAnime.js، وLenis. استخدمه عند إنشاء تجارب تمرير متميزة، أو مؤشرات مخصصة، أو انتقالات للصفحة، أو رسوم متحركة نصية، أو تأثيرات اختلاف المنظر، أو التفاعلات الدقيقة، أو أي رسوم متحركة تحتاج إلى أن تكون بمعدل 60 إطارًا في الثانية وتستحق جائزة. مشغلات عند طلبات التمرير السلس، ScrollTrigger، التأثيرات المغناطيسية، كشف الرسوم المتحركة، التمرير الأفقي، أقسام الدبوس، التأثيرات المتداخلة، useScroll، useTransform، التكامل مع Three.js/WebGL، الفن الخوارزمي، الفن الرياضي، الفن التوليدي، الفركتلات، أنظمة L، حقول التدفق، عوامل الجذب الغريبة، الهندسة المقدسة، الألغاز الهندسية، تشريح دوديني، تنغرم، فسيفساء، بلاط بنروز، الحركية الطباعة، أو تأثيرات الخلل، أو انفجار النص، أو تحويل النص، أو النص الدائري، أو التصميم الوحشي، أو الرسوم المتحركة البسيطة، أو الوحشية الجديدة، أو خلط فلسفة التصميم. نهج رد الفعل الأول مع التنظيف المناسب والخطافات. المصدر: devmartinese/awwwards-animations-skill.

كيف أثبّت awwwards-animations؟

افتح الطرفية أو أداة سطر الأوامر لديك مثل Terminal أو iTerm أو Windows Terminal انسخ ونفّذ هذا الأمر: npx skills add https://github.com/devmartinese/awwwards-animations-skill --skill awwwards-animations بعد التثبيت، سيتم إعداد المهارة تلقائيا في بيئة البرمجة بالذكاء الاصطناعي لديك وتصبح جاهزة للاستخدام في Claude Code أو Cursor أو OpenClaw

أين مستودع المصدر؟

https://github.com/devmartinese/awwwards-animations-skill

التفاصيل

الفئة
</>أدوات التطوير
المصدر
skills.sh
أول ظهور
2026-02-11

مهارات ذات صلة

لا يوجد