افکت‌های اسکرول مثل Parallax، Reveal (نمایش تدریجی) و Pinned Elements جزو جذاب‌ترین بخش‌های GSAP هستند که با پلاگین ScrollTrigger به‌سادگی پیاده می‌شوند. در ادامه، ساختار و نمونه‌کد برای هر حالت را می‌بینید.

🟢 ۱. راه‌اندازی پایه

ابتدا کتابخانه‌ها را اضافه کنید:

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);
</script>

🟡 ۲. Parallax Scroll (پس‌زمینه‌ی چندلایه)

ایده: عناصر با سرعت متفاوت نسبت به اسکرول حرکت کنند.

HTML

<section class="hero">
  <img class="bg" src="bg.jpg" alt="">
  <img class="mid" src="mid.png" alt="">
  <img class="fg" src="fg.png" alt="">
</section>

CSS

.hero { position: relative; height: 200vh; }
.hero img {
  position: absolute; width: 100%;
}

GSAP

gsap.to(".bg",  {
  yPercent: 20,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    scrub: true
  }
});
gsap.to(".mid", {
  yPercent: 40,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    scrub: true
  }
});
gsap.to(".fg",  {
  yPercent: 60,
  ease: "none",
  scrollTrigger: {
    trigger: ".hero",
    start: "top top",
    scrub: true
  }
});

• scrub: true حرکت نرم و هم‌زمان با اسکرول را تضمین می‌کند.

🟠 ۳. Reveal Sections (نمایش تدریجی)

ایده: وقتی کاربر به یک بخش می‌رسد، محتوا با افکت ظاهر شود.

HTML

<section class="panel">...</section>
<section class="panel">...</section>

CSS

.panel {
  opacity: 0;
  transform: translateY(50px);
  min-height: 100vh;
}

GSAP

gsap.utils.toArray('.panel').forEach(panel => {
  gsap.from(panel, {
    y: 50,
    opacity: 0,
    duration: 1,
    ease: "power2.out",
    scrollTrigger: {
      trigger: panel,
      start: "top 80%",   // وقتی ۲۰٪ بالای پنل وارد viewport شد
      toggleActions: "play none none reverse"
    }
  });
});

• toggleActions مشخص می‌کند انیمیشن با ورود یا خروج چه کاری انجام دهد.

🟤 ۴. Pinned Elements (ثابت ماندن یک بخش)

ایده: بخشی از صفحه در حین اسکرول ثابت بماند.

HTML

<section class="intro">Intro</section>
<section class="pin-section">
  <div class="pin-content">Pinned while scrolling</div>
</section>
<section class="outro">Outro</section>

CSS

.pin-section { height: 200vh; }
.pin-content { width: 100%; background: coral; padding: 50px; }

GSAP

ScrollTrigger.create({
  trigger: ".pin-section",
  start: "top top",
  end: "bottom top",
  pin: ".pin-content",
  pinSpacing: true,
  scrub: true
});

• pin عنصری را در طول محدوده‌ی اسکرول ثابت می‌کند.

💡 نکات حرفه‌ای

1. Performance: تصاویر بزرگ را lazy-load کنید و از will-change: transform برای روانی استفاده کنید.

2. Responsive: از ()ScrollTrigger.matchMedia برای تغییر تنظیمات در اندازه‌های مختلف استفاده کنید.

3. Parallax معکوس: با yPercent منفی می‌توانید افکت برعکس ایجاد کنید.

4. Combine: می‌توانید pin + reveal یا parallax + fade را در یک Timeline ترکیب کنید.

✅ جمع‌بندی

• Parallax: حرکت لایه‌ها با سرعت‌های مختلف (scrub).

• Reveal: ظاهر شدن بخش‌ها هنگام ورود به viewport.

• Pinned: قفل کردن المان در طول اسکرول با pin.

با GSAP + ScrollTrigger تمام این افکت‌ها روان، کنترل‌پذیر و بدون نیاز به کتابخانه‌های جانبی پیاده می‌شوند.