در GSAP برای ساخت انیمیشن‌های اسکرولی (وابسته به حرکت صفحه یا اسکرول نرم)، پلاگین‌های اختصاصی وجود دارد که کنترل کامل اسکرول را به شما می‌دهد. سه پلاگین مهم عبارتند از ScrollTrigger، ScrollTo و ScrollSmoother.

🟢 1️⃣ 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>

یا با NPM:

npm install gsap

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
gsap.registerPlugin(ScrollTrigger);

استفادهٔ ساده

gsap.to(".box", {
  x: 500,
  scrollTrigger: ".box" // وقتی box به viewport رسید انیمیشن اجرا شود
});

گزینه‌های مهم

نمونه با scrub و pin

gsap.to(".section", {
  y: -200,
  scrollTrigger: {
    trigger: ".section",
    start: "top top",
    end: "bottom top",
    scrub: true,
    pin: true
  }
});

🟡 2️⃣ ScrollToPlugin

برای اسکرول نرم و انیمیشنی به یک مختصات یا المان مشخص.

نصب / فعال‌سازی

<script src="https://cdn.jsdelivr.net/npm/gsap@3/dist/ScrollToPlugin.min.js"></script>

یا:

import { ScrollToPlugin } from "gsap/ScrollToPlugin";
gsap.registerPlugin(ScrollToPlugin);

مثال: اسکرول نرم به بخش مشخص

gsap.to(window, {duration: 1, scrollTo: "#about"});

گزینه‌های کاربردی

• offsetY: فاصله از بالا (مثلاً وقتی هدر ثابت دارید)

gsap.to(window, {duration: 1, scrollTo: {y: "#about", offsetY: 80}});

• می‌توان مقدار دقیق پیکسل هم داد:

gsap.to(window, {duration: 1, scrollTo: 500});

🟠 3️⃣ ScrollSmoother

پلاگین پریمیوم GSAP (Club GreenSock) برای ایجاد اسکرول بسیار نرم (smooth scrolling) با قابلیت پارالاکس.

ویژگی‌ها

• اسکرول نرم با اینرسی و سرعت دلخواه

• افکت پارالاکس ساده برای بک‌گراندها و المان‌های لایه‌ای

• کنترل سرعت هر سکشن به صورت جداگانه

فعال‌سازی

نیاز به عضویت Club GreenSock و دریافت فایل پلاگین دارد:

<script src="ScrollSmoother.min.js"></script>

gsap.registerPlugin(ScrollSmoother);

const smoother = ScrollSmoother.create({
  wrapper: "#wrapper",
  content: "#content",
  smooth: 1.2,      // میزان نرمی (ثانیه)
  effects: true     // فعال‌سازی افکت پارالاکس
});

نمونه پارالاکس

<div class="parallax" data-speed="0.5">بک‌گراند</div>

// با effects:true کافیست data-speed تعیین شود

✅ مقایسه و کاربردها

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

• می‌توان ScrollTrigger + ScrollTo را ترکیب کرد تا اسکرول نرم همراه با انیمیشن‌های مرحله‌ای داشته باشید.

• برای پروژه‌های بزرگ، مدیریت context و cleanup (مثل ()ScrollTrigger.killAll) ضروری است.

• ScrollSmoother مناسب زمانی است که طراحی واقعاً به اسکرول لوکس و پارالاکس پیچیده نیاز دارد.

این سه پلاگین مجموعهٔ کاملی برای ساخت تجربه‌های انیمیشن اسکرولی حرفه‌ای در وب هستند.