আজকে শিখব GSAP timeline, easing ও stagger

আমরা প্রথমে নিচের ফ্রি কোর্সটি টার্গেট করে শেখা শুরু করেছি। উল্লেখ্য এখানে আমরা সবকিছুই ফ্রি শিখব।
আমাদের আপাতত শেখার প্যাটার্ন হচ্ছে - আমরা কিছুদিন নির্দিষ্ট টপিক সিলেক্ট করে তার উপর কয়েকদিন / সপ্তাহ / মাসও হতে পারে - শিখব, নলেজ শেয়ার করব।

#gsap3express এর আজকে আমরা বেশকিছু বিষয় জানব নিয়ে যেগুলো নিয়ে আমি গত কয়েকদিন শিখেছি।
gsap3express এর টিউটর অনেক সুন্দর করে ভিডিওতে বুঝিয়েছেন। আমি জাস্ট আমার মতো করে লিখতেছি।
আপনারা অবশ্যই এই দারুণ ফ্রি টিউটোরিয়ালটি ফলো করবেন।

https://www.creativecodingclub.com/courses/FreeGSAP3Express

1. Timeline:

একটার পর একটা সিকুয়েন্সে এনিমেশন করার জন্য GSAP এর দারুণ একটি ফিচার হচ্ছে timeline (gsap.timeline)। gsap.timeline দিয়ে আমরা একাধিক tween কে ( gsap.from / gsap.to / gsap.fromTo ) আমরা একটা গ্রুপ করে ব্যাবহার করতে পারি। চাইলে এক timeline এর ভিতর অন্য timeline ও এড করতে পারি।

ধরুন আমার একটা HTML স্ত্রাকচার এমন -

img
h1
p
button

তো আমি চাচ্ছি যে প্রথমে img এনিমেশন হবে, তারপর h1, তারপর p, তারপর button। উল্লেখ্য যে - এনিমেশন ইফেক্ট আমার প্রয়োজন মতো আমি দিতে পারি যেমন - img টা ফেড ইফেক্ট ও অন্যগুলো Slide Up ইফেক্ট।
তো gsap.to বা gsap.from দিয়ে সাথে delay প্রপার্টি ব্যাবহার করে আমরা কিন্তু আমাদের কাঙ্ক্ষিত একটার পর একটা এনিমেশন বানাতে পারি। কিন্তু সমস্যা হচ্ছে ধরুন আমি সিরিয়ালের উপড়ের দিকের কোনটার duration বা delay কমিয়ে বা বাড়িয়ে দিয়েছি। তাহলে তখন আমাকে আবার পরের আইটেমগুলোর সবগুলোকে ধরে ধরে ম্যানুয়ালি delay এডজাস্ট করতে হবে।

কিন্তু gsap.timeline ব্যাবহার করে আমরা এই ঝামেলা থেকে সহজেই মুক্তি পেতে পারি।

gsap.timeline()
  .from("img", {autoAlpha:0})
  .from("h1", {opacity:0, scale:0, ease:"back"})
  .from("p", {y:160, stagger:0.1, duration:0.8, ease:"back"})
  .from("button", {xPercent:100, duration:0.2})

2. Easing:

যেকোনো এনিমেশনকে রিএলিস্টিক করার জন্য Easing অনেক গুরুত্বপূর্ণ। GSAP এর অনেকরকম Easing আছে। প্রত্যেকটারই আলাদা আলাদা বৈশিষ্ট্য আছে। আমার কাছে “back” Easing টা ভালো লেগেছে। GSAP এর Easing ইফেক্ট ভিজুয়ালাইজেশনের দারুণ একটা টুল আছে, সেখান থেকে আপনারা ট্রাই করে করে আপনার Easing ইফেক্ট এর কোড জেনারেট করে ব্যাবহার করতে পারবেন। সেখানে Easing ইফেক্ট প্রিভিউ করার জন্য ৩ টা পদ্দটি আছে - graph, clock এবং box।
https://gsap.com/docs/v3/Eases/

3. Stagger

সেইম সিলেক্টরের যদি মাল্টিপল আইটেম থাকে, তাহলে তাদের এনিমেশনের মধ্যে একটু delay সেট করে একটার পর একটা সিকুয়েন্স এর মত ( অনেকটা timeline এর মতো ) এনিমেশনের জন্য stagger ব্যাবহার করতে পারেন। তবে এই stagger এর আবার দারুণ সেটিংস আছে। যেমন - stagger দিয়ে সাধারণত প্রথম আইটেম থেকে একটার পর একটা শেষের দিকে গিয়ে একটু delay দিয়ে এনিমেশন হবে। কিন্তু আপনি চাইলে বলতে পারেন যে উলটা দিক থেকে stagger হবে, কিংবা ছেন্টার আইটেম থেকে সবদিকে stagger হবে, টোটাল stagger amount কতক্ষণ হবে বা প্রত্যেকটা আইটেম এর stagger এর মধ্যে delay কতক্ষণ হবে ইত্যাদি।

4. GSAP এর ডকুমেন্টেশন

সবকিছু তো ভিডিউ থেকেই শেখা যাবে না, বিস্তারিত জানার জন্য GSAP এর ডকুমেন্টেশনও মাঝে মাঝে পড়তে হবে। কিংবা আপনারা অনলাইনে সার্চ করে অন্য কোন সাইট থেকেও কাঙ্ক্ষিত বিষয় সম্পর্কে জানতে পারবেন। codepen এও অনেক অনেক GSAP এর এক্সাম্পল কোড পেয়ে যাবেন। সেখান থেকেও ভালো আইডিয়া পেতে পারেন।

আপনারাও আপনাদের শেখার বিষয় সবার সাথে শেয়ার করুন, প্রশ্ন করুন, উত্তর দিন। একা একা শেখা বা কন্ট্রিবিউট করা অনেক টাফ, কিন্তু আমরা সবাই মিলে করলে সবার শেখাও হবে, সবার জন্য সহজও হবে। ধন্যবাদ।

আমাদের ফেসবুক গ্রুপ লিঙ্কঃ Redirecting...