كل المنشورات / الحركة / №05
أبعد من حركات CSS: ScrollTrigger والـ Timelines في GSAP
تكفي حركات CSS للتأثيرات البسيطة، لكن للحركة المرتبطة بالتمرير والأقسام المثبّتة والتسلسلات يمنحك GSAP عبر ScrollTrigger والـ Timelines تحكماً لا يصل إليه CSS وحده.
كـ Frontend Developer، الأنيميشن صار جزء مهم من تجربة المستخدم بأي موقع حديث.
غالبًا بنستخدم CSS animations بشكل طبيعي لنعمل تأثيرات بسيطة، وهنن فعلاً مناسبين لكثير حالات.
بس لما تصير الواجهة أعقد شوي أو بدك تعمل interactions متقدمة، بتحس إنو التحكم صار محدود.
لهيك أنا بحب أستخدم GSAP.
اللي بيميز GSAP فعلًا هو مستوى التحكم بالأنيميشن، وخصوصًا ميزتين بشوفهن حلوين:
🔹 ScrollTrigger
هاي الميزة بتخليك تربط الأنيميشن مباشرة مع حركة الـ scroll.
مثلاً فيك:
- تشغل الأنيميشن لما العنصر يدخل بالـ viewport
- تربط تقدم الأنيميشن مع حركة السكرول نفسها (scrub)
- تثبت section أثناء السكرول (pin)
- تعمل صفحات storytelling تفاعلية متل اللي منشوفها بكثير من المواقع الحديثة
🔹 Timelines
بدل ما تكتب عدة أنيميشن وتحاول تنسق بينهم يدويًا،
الـ timelines بتخليك ترتب كل الأنيميشن بتسلسل واحد واضح.
يعني فيك:
- تتحكم بترتيب الأنيميشن
- تضيف delays بسهولة
- تشغل أو توقف أو تعيد الأنيميشن كامل
- تزامن عدة أنيميشن مع بعض
النتيجة إنو الأنيميشن ما بيكون بس تأثير شكلي، بل بصير جزء من تجربة المستخدم.
إذا عم تبني واجهات حديثة، برأيي GSAP بيعطيك مستوى تحكم صعب توصله باستخدام CSS بس.