motion

Motion (package: motion, formerly framer-motion) is the industry-standard React animation library used in production by thousands of applications. With 30,200+ GitHub stars and 300+ official examples, it provides a declarative API for creating sophisticated animations with minimal code.

Production Tested: React 19, Next.js 16, Vite 7, Tailwind v4

Performance: Uses native ScrollTimeline API when available for hardware acceleration.

قم بإنشاء رسوم متحركة React متطورة باستخدام Motion (المعروفة سابقًا باسم Framer Motion) - الرسوم المتحركة التعريفية، والإيماءات (السحب، والتحويم، والنقر)، وتأثيرات التمرير، وفيزياء الربيع، والرسوم المتحركة التخطيطية، ومعالجة SVG. قم بتحسين حجم الحزمة باستخدام LazyMotion (4.6 كيلو بايت) أو useAnimate mini (2.3 كيلو بايت). يُستخدم عندما: إضافة تفاعلات السحب والإفلات، أو إنشاء رسوم متحركة يتم تشغيلها بالتمرير، أو تنفيذ مربعات حوار مشروطة مع انتقالات، أو إنشاء دوارات ذات زخم، أو تحريك انتقالات الصفحة/المسار، أو إنشاء أقسام اختلاف المنظر، أو تنفيذ الأكورديون مع توسيع/طي سلس، أو تحسين أحجام حزمة الرسوم المتحركة. بالنسبة إلى قائمة الرسوم المتحركة البسيطة، استخدم مهارة التحريك التلقائي بدلاً من ذلك (3.28 كيلو بايت مقابل 34 كيلو بايت). استكشاف الأخطاء وإصلاحها: خروج AnimatePresence لا يعمل، أو مشكلات أداء القائمة الكبيرة، أو تعارضات انتقال Tailwind، أو أخطاء "استخدام العميل" لـ Next.js، أو مشكلات تخطيط الحاوية القابلة للتمرير، أو أخطاء إنشاء Cloudflare Workers (تم حلها في ديسمبر 2024). المصدر: joaquimcassano/ideas-marketplace.