ما هي GSAP؟
GSAP (GreenSock Animation Platform) مكتبة JavaScript للرسوم المتحركة تعمل داخل المتصفح. يمكنها أن تغيّر خصائص CSS ورسومات SVG ومشاهد canvas وWebGL، بل أي كائن JavaScript يحمل قيمًا رقمية، بدقة على امتداد الزمن. ولا يهمها ما بُني به الموقع: HTML عادي أو React أو Vue، كلها تعمل.
تكمن قوتها في الخط الزمني (timeline): يمكننا ترتيب عشرات الحركات بدقة أجزاء الثانية، وربط بعضها ببعض، وإيقافها وتشغيلها بالعكس. أما إضافة ScrollTrigger فتربط هذه الخطوط الزمنية بالتمرير، وهكذا نثبّت قسمًا على الشاشة ونغيّر محتواه كلما تقدّم الزائر في التمرير. وتقسّم إضافة SplitText النص إلى حروف أو كلمات أو أسطر، بينما تحوّل MorphSVG وDrawSVG الرسومات أو ترسمها خطًا بعد خط.
طوّرتها GreenSock، وانضمت إلى Webflow في عام 2024، وأصبحت منذ عام 2025 مجانية للجميع، بما في ذلك المشاريع التجارية والإضافات التي كانت مدفوعة من قبل. وتعمل على ملايين المواقع لأنها تتولى منذ سنوات معالجة الفروق بين المتصفحات نيابة عنك.
أين نستخدم GSAP
نستخدم الحركة لتخدم القصة لا لمجرد الزينة. وهذه أكثر المهام التي نلجأ فيها إلى GSAP:
سرد يتقدم مع التمرير
عبر ScrollTrigger نثبّت قسمًا ونعرض الخطوات أو الشاشات أو مزايا المنتج واحدة تلو الأخرى مع تمرير الزائر، فتتضح الخدمة المعقدة في ثوانٍ.
الافتتاح والانتقالات
نبني الثانية الأولى من الصفحة، وظهور العنوان، وفتح القوائم وإغلاقها على خط زمني واحد، فيصل كل عنصر في اللحظة المناسبة وبالسرعة المناسبة.
تحريك الشعارات والرسومات
في مشاريع الهوية نجهّز رسومًا متحركة بصيغة SVG ترسم الشعار أو تحوّل شكله، ويُستخدم الملف نفسه في الموقع وفي العروض التقديمية.
تفاعلات صغيرة
تستجيب الأزرار والبطاقات والنماذج لحركة الزائر باستجابات قصيرة وذات معنى، توضح ما يمكن النقر عليه وما الذي تغيّر.
لماذا GSAP؟
سلسة وسريعة
تشغّل GSAP الرسوم المتحركة بالتزامن مع دورة الرسم في المتصفح. وعندما نحرّك خصائص يعالجها معالج الرسوميات بسهولة مثل التحويل والشفافية، تتحرك الصفحة دون تقطّع على الهواتف أيضًا.
النتيجة نفسها في كل متصفح
تعالج المكتبة الفروق الصغيرة بين المتصفحات بنفسها، فترى الحركة ذاتها في Safari وChrome وFirefox.
مع مراعاة سهولة الوصول
عبر gsap.matchMedia() نحدد سلوكًا مختلفًا لكل حجم شاشة وللزوار الذين فعّلوا خيار «تقليل الحركة»، فيرى من تزعجه الحركة المحتوى ثابتًا لكن كاملًا.
كيف نعمل على مشروعك
نحدد أولًا ما ينبغي أن تقوله الحركة: أي قسم يُفتح مع التمرير وما الذي يبقى ثابتًا، ونناقش ذلك معك على التصميم في Figma. ثم نبني الرسوم المتحركة في الشيفرة ونختبرها على أجهزة حقيقية.
قبل الإطلاق نقيس سرعة الصفحة عبر PageSpeed Insights ونتأكد من أن الحركة لا تبطئ التحميل. ونتبع الطريق نفسه في مواقعنا: فالرسوم المتحركة في الصفحة الرئيسية لـ MHS Links AI تعمل بـ GSAP وScrollTrigger وgsap.matchMedia().
