GSAP

معنى GSAP بالعربي: مكتبة GSAP للتحريك. هي اختصار GreenSock Animation Platform، مكتبة جافاسكربت متخصصة في الحركة داخل صفحات الويب، تحرّك أي عنصر أو نص أو رسم SVG بدقة وسلاسة، من حركة زر بسيطة إلى مشهد كامل يتغير مع التمرير.

GSAP in Arabic: مكتبة GSAP للتحريك.

كيف تعمل؟

تحدد العنصر والحالة التي تريد الوصول إليها والمدة، وتتولى المكتبة حساب كل إطار بينهما:

gsap.to(".box", { x: 200, opacity: 1, duration: 1 });

وتجمع الحركات المتتالية في خط زمني (Timeline) واحد، فتتحكم في ترتيبها وتوقيتها كأنها مشهد واحد بدل حركات منفصلة.

الحركة مع التمرير: ScrollTrigger

أشهر إضافاتها ScrollTrigger، وهي التي تربط الحركة بموضع التمرير: يبدأ المشهد حين يصل القسم إلى الشاشة، أو تتقدم الحركة خطوة بخطوة كلما نزل الزائر. هذا ما يصنع صفحات القصص التفاعلية التي يتحرك فيها المشهد مع السكرول.

هل هي مجانية؟

نعم. بعد استحواذ Webflow عليها صارت المكتبة وكل إضافاتها مجانية، بما فيها إضافات كانت مدفوعة من قبل، ويمكن استخدامها في المشاريع التجارية وفق شروط ترخيصها.

نصيحة عملية في ووردبريس

حمّل GSAP في الصفحات التي تستخدمها فقط، واحترم إعداد تقليل الحركة في نظام الزائر عبر prefers-reduced-motion. وإن كانت تأثيرات الحركة الجاهزة في Elementor تكفيك فلا داعي لمكتبة إضافية؛ GSAP تستحق مكانها حين تحتاج مشهدًا مرتبطًا بالتمرير أو تسلسلًا دقيقًا لا تقدر عليه الأدوات الجاهزة.