مقدمة إلى GSAP

// الصيغة الأساسية
gsap.to(target, {vars});

// أمثلة عملية
// تحريك عنصر بمعرف "box" لمسافة 200 بكسل إلى اليمين
gsap.to("#box", {x: 200, duration: 1});

// تحريك جميع العناصر ذات الصنف "circle" بخصائص متعددة
gsap.to(".circle", {
    y: 50,                   // تحريك 50 بكسل للأسفل
    scale: 1.5,              // تكبير بمقدار 1.5x
    opacity: 0.7,            // تعتيم قليلاً
    duration: 2,             // مدة التحريك ثانيتين
    ease: "power2.inOut"     // دالة التسهيل
});

// الصيغة الأساسية
gsap.from(target, {vars});

// أمثلة
// تحريك مربع إلى موقعه الحالي من موقع بعيد على اليسار
gsap.from("#box", {x: -200, duration: 1});

// تأثير ظهور مع عدة خصائص
gsap.from(".panel", {
    y: 100,                // يبدأ من 100 بكسل للأسفل
    opacity: 0,            // يبدأ غير مرئي
    scale: 0.8,            // يبدأ بحجم أصغر
    duration: 1.5,
    stagger: 0.2,          // تأخير 0.2 ثانية بين كل عنصر
    ease: "back.out(1.7)"  // تأثير ارتداد للخلف
});

// الصيغة الأساسية
gsap.fromTo(target, {fromVars}, {toVars});

// مثال - تحريك عنصر من الشفاف في الأعلى إلى المرئي في الموقع الحالي
gsap.fromTo(".card", 
    {                      // قيم البداية
        y: -50,
        opacity: 0
    }, 
    {                      // قيم النهاية والإعدادات
        y: 0,
        opacity: 1,
        duration: 1,
        ease: "power1.out"
    }
);

// الصيغة الأساسية
gsap.set(target, {vars});

// أمثلة
// تعيين موضع أولي
gsap.set(".box", {x: 100, opacity: 0});

// إعادة تعيين العناصر إلى حالة معينة قبل تحريكها
gsap.set(".item", {clearProps: "all"}); // يزيل جميع التحويلات والتنسيقات المطبقة بواسطة GSAP

// إنشاء timeline جديد
const tl = gsap.timeline();

// إضافة tweens إلى timeline
tl.to(".box1", {x: 100, duration: 1})
.to(".box2", {y: 50, duration: 0.5})
.to(".box3", {rotation: 360, duration: 1.5});
                    

const tl = gsap.timeline({
defaults: {duration: 1, ease: "power2.inOut"}, // الإعدادات الافتراضية لجميع التحريكات في هذا الـ timeline
paused: true,    // ابدأ بحالة متوقفة
repeat: 2,       // كرر الـ timeline مرتين (3 مرات إجمالاً)
yoyo: true,      // اعكس التحريك في كل تكرار
onComplete: function() {
    console.log("timeline completed!");
}
});

const tl = gsap.timeline({paused: true});
tl.to(".box", {x: 100, duration: 1})
.to(".box", {y: 50, duration: 1});

// التحكم في التشغيل
tl.play();        // تشغيل
tl.pause();       // إيقاف مؤقت
tl.reverse();     // عكس الاتجاه
tl.restart();     // إعادة التشغيل من البداية
tl.seek(1.5);     // الانتقال إلى وقت محدد (بالثواني)
tl.progress(0.5); // الانتقال إلى نقطة محددة (0-1)
tl.timeScale(2);  // زيادة سرعة التشغيل

const tl = gsap.timeline();

// التتابع الافتراضي: يبدأ التحريك بعد انتهاء التحريك السابق
tl.to(".box1", {x: 100, duration: 1})

// يبدأ بعد 0.5 ثانية من بدء التحريك السابق
.to(".box2", {y: 50, duration: 1}, "-=0.5")

// يبدأ في نفس وقت بدء التحريك السابق
.to(".box3", {rotation: 360, duration: 1}, "<")

// يبدأ بعد 0.2 ثانية من بدء التحريك السابق
.to(".box4", {scale: 1.5, duration: 1}, "<0.2")

// يبدأ في وقت محدد منذ بداية Timeline (2 ثانية)
.to(".box5", {opacity: 0.5, duration: 1}, 2)

// يبدأ بعد نهاية جميع التحريكات السابقة
.to(".box6", {x: -100, duration: 1}, ">");

// timeline فرعية
const headerTL = gsap.timeline();
headerTL.from(".logo", {y: -50, opacity: 0, duration: 1})
    .from(".nav-item", {y: -20, opacity: 0, stagger: 0.1, duration: 0.5}, "-=0.5");

// timeline رئيسية
const mainTL = gsap.timeline();
mainTL.to(".curtain", {y: "-100%", duration: 1})
  .add(headerTL) // إضافة timeline فرعية
  .from(".content", {opacity: 0, duration: 1}, "-=0.5");

// التأكد من تسجيل ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

// مثال بسيط: تشغيل تحريك عند التمرير إلى عنصر
gsap.to(".box", {
    x: 300,
    duration: 1,
    scrollTrigger: {
        trigger: ".box",    // العنصر الذي يطلق التحريك
        start: "top center", // متى يبدأ (أعلى العنصر يصل إلى وسط الشاشة)
        end: "bottom center", // متى ينتهي (أسفل العنصر يصل إلى وسط الشاشة)
        toggleActions: "play pause reverse reset", // الإجراءات عند (دخول، خروج، دخول مرة أخرى، خروج مرة أخرى)
        markers: true,      // عرض علامات للتوضيح (مفيد للتطوير)
    }
});

// تحريك مربط بالتمرير
gsap.to(".element", {
    x: 500,
    rotation: 360,
    duration: 1,
    scrollTrigger: {
        trigger: ".element",
        start: "top 80%",
        end: "top 20%",
        scrub: true,      // ربط خطي دقيق بالتمرير
        // scrub: 0.5,    // إضافة تأخير زمني (بالثواني) للحصول على تأثير أكثر سلاسة
        markers: true
    }
});

// تثبيت عنصر أثناء التمرير
ScrollTrigger.create({
    trigger: ".panel",
    start: "top top", // عندما يصل أعلى العنصر إلى أعلى الشاشة
    end: "+=500",     // استمر في التثبيت لمسافة 500 بكسل من التمرير
    pin: true,        // تثبيت العنصر المحدد في trigger
    pinSpacing: true, // الاحتفاظ بمساحة العنصر في تدفق الصفحة بعد التثبيت
});

// إنشاء timeline مرتبطة بالتمرير
const tl = gsap.timeline({
    scrollTrigger: {
        trigger: ".container",
        start: "top center",
        end: "bottom center",
        scrub: 1,
        pin: true,
        markers: true
    }
});

// إضافة تحريكات إلى timeline
tl.to(".box1", {x: 200, duration: 1})
  .to(".box2", {y: 100, duration: 1})
  .to(".box3", {rotation: 360, scale: 1.5, duration: 1});

// سيتم تشغيل كل هذه التحريكات بالتتابع أثناء تمرير المنطقة المحددة

ScrollTrigger.create({
    trigger: ".element",
    start: "top center",
    onEnter: () => console.log("دخول!"),
    onLeave: () => console.log("خروج!"),
    onEnterBack: () => console.log("دخول مرة أخرى!"),
    onLeaveBack: () => console.log("خروج مرة أخرى!")
});