3a:I[234811,["/_next/static/immutable/chunks/34uyxp9yky5ri.js","/_next/static/immutable/chunks/2nzb8l401r-wq.js","/_next/static/immutable/chunks/1z77ws2afh8iv.js","/_next/static/immutable/chunks/062zw51m13x90.js","/_next/static/immutable/chunks/1a4_x7972m_q_.js","/_next/static/immutable/chunks/0dj6zuo4dv8n3.js","/_next/static/immutable/chunks/27kxobvhw0gus.js","/_next/static/immutable/chunks/20x4tldr7aivc.js","/_next/static/immutable/chunks/0z4z2g7nnjo4u.js","/_next/static/immutable/chunks/1yhbqfr_80wgo.js"],"default"] 3c:I[27201,["/_next/static/immutable/chunks/34uyxp9yky5ri.js","/_next/static/immutable/chunks/2nzb8l401r-wq.js","/_next/static/immutable/chunks/1z77ws2afh8iv.js","/_next/static/immutable/chunks/062zw51m13x90.js","/_next/static/immutable/chunks/1a4_x7972m_q_.js","/_next/static/immutable/chunks/0dj6zuo4dv8n3.js","/_next/static/immutable/chunks/27kxobvhw0gus.js"],"IconMark"] 39:Tdcd,{"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://www.themind-platform.com#organization","name":"منصة ذا مايند التعليمية","alternateName":"The Mind Platform","url":"https://www.themind-platform.com","logo":{"@type":"ImageObject","url":"https://www.themind-platform.com/logo.svg"},"image":"https://www.themind-platform.com/og-image.png"},{"@type":"WebSite","@id":"https://www.themind-platform.com#website","url":"https://www.themind-platform.com","name":"منصة ذا مايند التعليمية","alternateName":"The Mind Platform","inLanguage":"ar","publisher":{"@id":"https://www.themind-platform.com#organization"}},{"@type":"Course","@id":"https://www.themind-platform.com/courses/gsap-for-web-designers#course","name":"GSAP FOR WEB DESIGNERS","description":"في هذا الكورس تبدأ من الصفر. لا تحتاج خبرة سابقة بالأنيميشن، فقط معرفة أساسية بـ HTML وCSS وJavaScript. وفي نهايته تكون قادراً على بناء صفحة هبوط متحركة بالكامل، وتفهم لماذا تتحرك العناصر بهذه الطريقة، لا أن تنسخ أكواداً جاهزة فقط. ماذا ستتعلم كيف تحرّك أي عنصر على الصفحة بسطر واحد الفرق بين to و from و fromTo ومتى تستخدم كلاً منها بناء تسلسلات حركية معقدة باستخدام Timeline ربط الحركة بالتمرير عبر ScrollTrigger، وهي الإضافة الأكثر طلباً في السوق تقسيم النصوص وتحريك الحروف والكلمات بـ SplitText منحنيات التوقيت (Easing) وكيف تجعل الحركة تبدو طبيعية بدل أن تبدو آلية أداء الأنيميشن: لماذا يتقطّع أحياناً وكيف تصلحه استخدام GSAP داخل React وNext.js بالطريقة الصحيحة لمن هذا الكورس مطوّر واجهات أمامية يريد رفع مستوى مشاريعه مصمم UI/UX يريد تنفيذ أفكاره الحركية بنفسه أي شخص يبني مواقع ويشعر أن نتائجه تنقصها الحياة المتطلبات معرفة أساسية بـ HTML وCSS وJavaScript. لا يشترط أي خبرة سابقة بالأنيميشن أو بـ GSAP.","url":"https://www.themind-platform.com/courses/gsap-for-web-designers","inLanguage":"ar","provider":{"@id":"https://www.themind-platform.com#organization"},"image":"https://qninjbugtddiclxydpki.supabase.co/storage/v1/object/public/themind/1790586197680_MAHMOUD_ABDELLAHI__1_.jpg","author":{"@type":"Person","name":"Ahmed Algilani","image":"https://qninjbugtddiclxydpki.supabase.co/storage/v1/object/public/themind/1784453679725_image_instrctor_1.jpg"},"hasCourseInstance":{"@type":"CourseInstance","courseMode":"online","inLanguage":"ar"},"offers":{"@type":"Offer","url":"https://www.themind-platform.com/courses/gsap-for-web-designers","price":0,"priceCurrency":"IQD","availability":"https://schema.org/InStock","category":"Paid"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"منصة ذا مايند التعليمية","item":"https://www.themind-platform.com"},{"@type":"ListItem","position":2,"name":"الدورات","item":"https://www.themind-platform.com/courses"},{"@type":"ListItem","position":3,"name":"GSAP FOR WEB DESIGNERS","item":"https://www.themind-platform.com/courses/gsap-for-web-designers"}]}]}3b:T725,

في هذا الكورس تبدأ من الصفر. لا تحتاج خبرة سابقة بالأنيميشن، فقط معرفة أساسية بـ HTML وCSS وJavaScript. وفي نهايته تكون قادراً على بناء صفحة هبوط متحركة بالكامل، وتفهم لماذا تتحرك العناصر بهذه الطريقة، لا أن تنسخ أكواداً جاهزة فقط.

ماذا ستتعلم

كيف تحرّك أي عنصر على الصفحة بسطر واحد
الفرق بين to وfrom وfromTo ومتى تستخدم كلاً منها
بناء تسلسلات حركية معقدة باستخدام Timeline
ربط الحركة بالتمرير عبر ScrollTrigger، وهي الإضافة الأكثر طلباً في السوق
تقسيم النصوص وتحريك الحروف والكلمات بـ SplitText
منحنيات التوقيت (Easing) وكيف تجعل الحركة تبدو طبيعية بدل أن تبدو آلية
أداء الأنيميشن: لماذا يتقطّع أحياناً وكيف تصلحه
استخدام GSAP داخل React وNext.js بالطريقة الصحيحة

لمن هذا الكورس

مطوّر واجهات أمامية يريد رفع مستوى مشاريعه
مصمم UI/UX يريد تنفيذ أفكاره الحركية بنفسه
أي شخص يبني مواقع ويشعر أن نتائجه تنقصها الحياة

المتطلبات

معرفة أساسية بـ HTML وCSS وJavaScript. لا يشترط أي خبرة سابقة بالأنيميشن أو بـ GSAP.

2d:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$39"}}],["$","$L3a",null,{"course":{"id":"cmul0sz81000110fma065vnxp","title":"GSAP FOR WEB DESIGNERS","slug":"gsap-for-web-designers","description":"$3b","price":0,"lifetimeEnabled":true,"priceSixMonths":null,"priceYearly":null,"thumbnail":"https://qninjbugtddiclxydpki.supabase.co/storage/v1/object/public/themind/1790586197680_MAHMOUD_ABDELLAHI__1_.jpg","isPublished":true,"isFeatured":false,"isLocked":false,"averageRating":0,"totalRatings":0,"createdAt":"$D2026-09-28T09:03:41.905Z","updatedAt":"$D2026-09-30T14:21:01.919Z","instructorId":"cmc1t7jg00003l104xuwqjvar","instructor":{"id":"cmc1t7jg00003l104xuwqjvar","name":"Ahmed Algilani","image":"https://qninjbugtddiclxydpki.supabase.co/storage/v1/object/public/themind/1784453679725_image_instrctor_1.jpg","instructorImage":"https://qninjbugtddiclxydpki.supabase.co/storage/v1/object/public/themind/1784453686166_image_instrctor_1.jpg","description":"مدرب ومطور فول ستاك بخبرة تمتد لأكثر من 12 سنة في تطوير تطبيقات الويب باستخدام أحدث التقنيات مثل JavaScript، React، Node.js، وPython. أؤمن بأهمية التعليم العملي من خلال بناء مشاريع واقعية تساعد المتدربين على اكتساب مهارات جاهزة لسوق العمل. أعمل على تبسيط المفاهيم التقنية وتقديمها بطريقة سهلة وفعالة تناسب جميع المستويات. هدفي هو تمكين الطلاب من تحقيق طموحاتهم المهنية من خلال تدريب شامل ومتابعة مستمرة. أستمتع بمشاركة المعرفة وتحفيز المتدربين على الإبداع والتميز في مجال البرمجة.","specialty":"Developer","averageRating":4.945054945054945,"totalRatings":91},"categories":[{"id":"cmda88dvb0000jm04gknyzda5","name":"gsap"},{"id":"cmda86ort0000l504cann4210","name":"web-animation"}],"sections":[{"id":"cmul0t9e8000310fmfluneb6o","title":"المقدمة ","order":0,"new":false,"lessons":[{"id":"cmuo71sq0000hn4y5v7qzwlui","title":"course intro","order":1,"createdAt":"$D2026-09-30T14:21:49.608Z","duration":0.516666666666667,"videoUrl":"https://vimeo.com/1231690223/ca5a053e34?share=copy&fl=sv&fe=ci","primaryVideoUrl":null,"resoursesUrl":"$undefined","new":false,"resourcesUrl":""}]},{"id":"cmul0tgb8000510fmr4dq4042","title":"محتوى الكورس ","order":0,"new":false,"lessons":[{"id":"cmul0wdve000311oncncbxmrx","title":"1-GSAP installation","order":1,"createdAt":"$D2026-09-28T09:06:20.858Z","duration":3.93333333333333,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0welk000511onfr9xh5eu","title":"2- gsap installition","order":2,"createdAt":"$D2026-09-28T09:06:21.801Z","duration":3.35,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wfdu000711onfbxqi5ka","title":"3-first example","order":3,"createdAt":"$D2026-09-28T09:06:22.818Z","duration":3.05,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wg52000911on15fr8a9h","title":"4-timeline","order":4,"createdAt":"$D2026-09-28T09:06:23.798Z","duration":2.88333333333333,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wgv9000b11onbf0er8i9","title":"5-duration & timining","order":5,"createdAt":"$D2026-09-28T09:06:24.742Z","duration":9.16666666666667,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0who6000d11onqlegjyk5","title":"6-timeline location","order":6,"createdAt":"$D2026-09-28T09:06:25.782Z","duration":1.41666666666667,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wiem000f11onjkxr99jc","title":"7-stagger","order":7,"createdAt":"$D2026-09-28T09:06:26.734Z","duration":1.5,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wj6y000h11onfwg2z075","title":"8-repeat & delay","order":8,"createdAt":"$D2026-09-28T09:06:27.755Z","duration":1.3,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wjwc000j11on7avru1ja","title":"9-Yoyo Effect","order":9,"createdAt":"$D2026-09-28T09:06:28.669Z","duration":0.983333333333333,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wkm5000l11ontrui1t2q","title":"10- Yoyo And Ease Effect","order":10,"createdAt":"$D2026-09-28T09:06:29.597Z","duration":3.06666666666667,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wli7000n11onnlh10hlv","title":"11- Scroll Trigger Installition","order":11,"createdAt":"$D2026-09-28T09:06:30.751Z","duration":2.08333333333333,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wm8p000p11ontopdd6o8","title":"12-scroll Trigger Example","order":12,"createdAt":"$D2026-09-28T09:06:31.706Z","duration":4.95,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null},{"id":"cmul0wn0w000r11on56dlm0an","title":"13- Pin Effect & end","order":13,"createdAt":"$D2026-09-28T09:06:32.651Z","duration":6.76666666666667,"videoUrl":null,"primaryVideoUrl":"$undefined","resoursesUrl":"$undefined","new":false,"resourcesUrl":null}]}]},"slug":"gsap-for-web-designers","urlCouponCode":null}]] 2f:null 33:[["$","title","0",{"children":"GSAP FOR WEB DESIGNERS"}],["$","meta","1",{"name":"description","content":" في هذا الكورس تبدأ من الصفر. لا تحتاج خبرة سابقة بالأنيميشن، فقط معرفة أساسية بـ HTML وCSS وJavaScript. وفي نهايته تكون قادراً على بناء صفحة هبوط متحركة بالكام"}],["$","meta","2",{"name":"author","content":"The Mind Platform"}],["$","link","3",{"rel":"manifest","href":"/site.webmanifest","crossOrigin":"$undefined"}],["$","meta","4",{"name":"keywords","content":"دورات,تعليم,تدريب,كورسات,شهادات,The Mind"}],["$","meta","5",{"name":"creator","content":"The Mind Platform"}],["$","meta","6",{"name":"publisher","content":"The Mind Platform"}],["$","meta","7",{"name":"robots","content":"index, follow"}],["$","meta","8",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","9",{"rel":"canonical","href":"https://www.themind-platform.com/courses/gsap-for-web-designers"}],["$","meta","10",{"name":"format-detection","content":"telephone=no, address=no, email=no"}],["$","meta","11",{"property":"og:title","content":"GSAP FOR WEB DESIGNERS"}],["$","meta","12",{"property":"og:description","content":" في هذا الكورس تبدأ من الصفر. لا تحتاج خبرة سابقة بالأنيميشن، فقط معرفة أساسية بـ HTML وCSS وJavaScript. وفي نهايته تكون قادراً على بناء صفحة هبوط متحركة بالكام"}],["$","meta","13",{"property":"og:image","content":"https://qninjbugtddiclxydpki.supabase.co/storage/v1/object/public/themind/1790586197680_MAHMOUD_ABDELLAHI__1_.jpg"}],["$","meta","14",{"property":"og:type","content":"website"}],["$","meta","15",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","16",{"name":"twitter:title","content":"جميع الدورات | The Mind"}],["$","meta","17",{"name":"twitter:description","content":"تصفح مجموعتنا الواسعة من الدورات التدريبية المتميزة في مختلف المجالات."}],["$","meta","18",{"name":"twitter:image","content":"https://qninjbugtddiclxydpki.supabase.co/storage/v1/object/public/themind/themind-platorm.png"}],["$","link","19",{"rel":"shortcut icon","href":"/favicon.ico"}],["$","link","20",{"rel":"icon","href":"/favicon.ico","sizes":"any"}],["$","link","21",{"rel":"icon","href":"/favicon-icon.svg","type":"image/svg+xml"}],["$","link","22",{"rel":"apple-touch-icon","href":"/favicon-icon.svg"}],["$","$L3c","23",{}]]