GSAP چیست؟ آموزش کاربردی و ویدیویی

 GSAP چیست؟ یک کتابخانه بسیار قدرتمند جاوا اسکریپتی برای ساخت انیمیشن های حرفه ای و روان GSAP (GreenSock Animation Platform) در وب است. این کتابخانه توسط تیم  GreenSock  توسعه داده شده و به‌عنوان یکی از استانداردهای اصلی انیمیشن در دنیای فرانت‌اند شناخته می‌شود.

طبق دسته بندی سایت رسمی GSAP ابزار های این کتابخانه به 5 دسته ی  Core(هسته اصلی Gsap), Scroll , Svg, Text  و Ui تقسیم می شود که در ادامه بعد از توضیح روش نصب این کتابخانه ,  به آموزش  5 ابزار اصلی  آن می پردازیم.

• مراحل نصب Local   کتابخانه  Gsap  :

1. ساخت پوشه ها و فایل های مورد نیاز , به شکل زیر:

سپس لینک زیر را  در مرورگر باز کنید و در پوشه Library  آن را Save as  کنید.

https://unpkg.com/gsap@3/dist/gsap.min.js

داخل فایل index.html  دو تگ script  ایجاد کنید و ابتدا فایل js Gsap  سپس فایل script.js  را  به شکل زیر آدرس دهی کنید.

<script src="libs/gsap.min.js"></script>
<script src="script.js"></script>

Note : در قسمت پلاگین ها میخوانیم که برای نصب هر پلاگین (مثلا text ، scroll trigger  ،…) باید مرحله save as  لینک مربوطه و فراخوانی و آدرس دهی در html  را مجدد تکرار کنیم. برای مثال در plugin text  داریم:

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.13.0/TextPlugin.min.js

<script src="libs/gsap.min.js"></script>
<script src="libs/TextPlugin.min.js"></script>
<script src="script.js"></script>

• در این مرحله Gsap  به طور کامل نصب شده و شما می توانید برای تست نصب در java script بنویسید console.log(gsap);

و بعد در قسمت کنسول مرورگر چک کنید ,  اگر object  یا تابع Gsap  رو دیدید و undefined  نداده بود یعنی به درستی نصب شده و حالا می توانید از آن استفاده کنید.

آیا میدانید مدرسه فرانت اند پرنیان، دوره آموزش فرانت اند از صفر تا صد را بصورت حرفه ای برگزار میکند؟

Core   پایه و اساس GSAP است و بدون آن هیچ انیمیشنی وجود ندارد. برای نوشتن تمام انیمیشن‌ها، تایم‌لاین‌ها و easingها از این بخش استفاده می‌کنند.

1. 3 متد اصلی Gsap  (( from, to, fromTo

کاربرد	کار	متد
برای ایجاد انیمیشن روی تعامل کاربر	حرکت المان از حالت فعلی به یک حالت مشخص	gsap.to()
معمولا هنگام لود صفحه یا ورود یک المان	حرکت المان از این حالت به حالت فعلی خودش	gsap.from()
برای کنترل پیشرفته و ساخت Timeline	تعیین و کنترل حالت شروع و پایان المان	gsap.fromTo()

• مثال کدی :

<div class="box" style="width:100px; height:100px; background:red; margin:50px;"></div>

<button id="animateBtn">Animate</button>


const box = document.querySelector('.box');
const btn = document.getElementById('animateBtn');

btn.addEventListener('click', () => {
 // gsap.to: از وضعیت فعلی به وضعیت جدید
  gsap.to(box, { x: 200, rotation: 45, duration: 1 });

  // gsap.from: از مقدار اولیه مشخص به وضعیت فعلی
  gsap.from(box, { y: -50, opacity: 0, duration: 1, delay: 1.2 });

  // gsap.fromTo: کنترل کامل شروع و پایان
  gsap.fromTo(
    box,
    { scale: 0.5, backgroundColor: 'blue' }, // شروع
    { scale: 1.2, backgroundColor: 'green', duration: 1, delay: 2.5 } // پایان
  );
});

Properties ( چه چیزهایی را می‌توان انیمیت کرد؟)

Transform Properties و Opacityبهینه ترین پراپرتی های قابل استفاده  در  Gsap هستند, بهتر هست از width, height, left, top  وامثال این ها استفاده نکنید چون performance  پایینی دارند.

Transform Properties:

• x / y
• scale / scaleX / scaleY
• rotate
• skew
• transformOrigin

gsap.to('.box', {
  x: 100,
  rotate: 45,
  scale: 1.2
});

Easing  ( احساس حرکت):

 Easing  مشخص می‌کند:

حرکت چطور شروع شود، شتاب بگیرد و متوقف شود

بدون  easing، انیمیشن مکانیکی و مصنوعی به نظر می‌رسد.

ساختار نام easing‌ها:

ease: 'power2.out'

• برخی از کاربردی ترین easing ها:

نام  Easing	عملکرد (چی کار می‌کند)
none / linear	حرکت یکنواخت بدون شتاب
power1.out	حرکت نرم و ملایم، مناسب انیمیشن‌های ساده
power2.out	طبیعی‌ترین حرکت برای UI
power3.out	حرکت پویا و قابل توجه
power4.out	حرکت قوی و دراماتیک
power2.inOut	شروع و پایان آرام، مناسب اسلایدر و سکشن
sine.out	حرکت بسیار نرم و مینیمال
expo.out	شروع سریع و پایان خیلی نرم
back.out	کمی برگشت در انتهای حرکت
bounce.out	پایان حرکت با پرش
elastic.out	پایان حرکت فنری و نمایشی

gsap.to(‘.box’, {  x: 200,  delay: 0.5duration: 1});

4 . Delay  و Duration:

  Delay  مشخص می‌کند انیمیشن بعد از چه مدت زمانی شروع شود (بر حسب ثانیه).

 Duration مدت زمان اجرای انیمیشن را تعیین می‌کند.

  GSAP.TO('.BOX', {
  X: 200,
  DELAY: 0.5
DURATION: 1
});

Yoyo و Repeat  :

Repeat  مشخص می‌کند انیمیشن چند بار تکرار شود (مقدار-1 یعنی تکرار بی‌نهایت)

 Yoyo باعث می‌شود انیمیشن بعد از اتمام، به حالت اولیه برگردد.

GSAP.TO('.BOX', {
  X: 200,
  DURATION: 1,
  REPEAT: 1,
  YOYO: TRUE
});

Defaults :

Defaults  برای تعریف تنظیمات پیش ‌فرض تمام انیمیشن‌های GSAP استفاده می‌شود.

و بعد از تعریف آن داریم:

gsap.defaults({
  duration: 1,
  ease: 'power2.out'
});
gsap.to('.box', { x: 200 });

timeline :

 Timeline برای مدیریت و هماهنگ‌سازی چند انیمیشن روی یک المان استفاده می‌شود و کنترل کامل روی ترتیب و زمان اجرا می‌دهد.  3 حالت ترتیبی,  هم زمان, هم پوشانی دارد:

const tl = gsap.timeline();

نکات و دستورات زیادی در ادامه وجود دارد که دعوت میکنیم از شما ویدیوی زیر را که توسط دانشجوی خوبمون، خانم پگاه مبشری تهیه و تولید شده است تماشا کرده و تمام آن نکات را آموزش ببینید.