𝗠𝗼𝘁𝗶𝗼𝗻 𝗶𝗻 𝗣𝗿𝗼𝗱𝘂𝗰𝘁𝗶𝗼𝗻: 𝗟𝗮𝘆𝗼𝘂𝘁 𝗮𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻𝘀 𝗮𝗻𝗱 𝗮𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗹𝗲 𝗽𝗮𝘁𝘁𝗲𝗿𝗻𝘀
Framer-motion পরিবর্তিত হয়েছে। ২০২৪ সালের শেষের দিক থেকে, প্যাকেজটির নাম এখন Motion। আপনাকে অবশ্যই motion/react ইমপোর্ট পাথ ব্যবহার করতে হবে।
বেশিরভাগ টিউটোরিয়াল এখন পুরনো হয়ে গেছে। সেগুলো এখনও পুরনো ইমপোর্ট দেখায় এবং অ্যাক্সেসিবিলিটির অভাব রয়েছে। এই গাইডটি আপনাকে বাস্তব প্রজেক্টে আধুনিক Motion ব্যবহার করতে সাহায্য করবে।
𝗧𝗵𝗲 𝗨𝗽𝗴𝗿𝗮𝗱𝗲
এই পরিবর্তনটি সহজ। আপনি যদি ভার্সন ১১ ব্যবহার করেন, তবে ভার্সন ১২-তে আসাটা কেবল একটি 'find-and-replace' করার মতো কাজ।
- আনইনস্টল করুন:
npm uninstall framer-motion - ইনস্টল করুন:
npm install motion - ইমপোর্ট আপডেট করুন: 'framer-motion'-কে 'motion/react' দিয়ে পরিবর্তন করুন
মাইগ্রেশনের সময় আপনি উভয় প্যাকেজ একসাথে চালাতে পারেন। তবে এগুলোকে চিরকাল আপনার কোডবেসে রেখে দেবেন না।
𝗟𝗮𝘆𝗼𝘂𝘁 𝗔𝗻𝗶𝗺𝗮𝘁𝗶𝗼𝗻𝘀
layout প্রপ Motion-কে একটি এলিমেন্টের সাইজ এবং পজিশন পর্যবেক্ষণ করতে বলে। এটি ব্রাউজারকে হঠাৎ করে নতুন জায়গায় লাফিয়ে (snap) যেতে না দিয়ে পরিবর্তনের অ্যানিমেশন দেখায়।
লিস্টের জন্য layout="position" ব্যবহার করুন। এটি কোনো আইটেম বড় হওয়ার সময় তার পাশের (siblings) আইটেমগুলোকে সরিয়ে দেয় কিন্তু ভেতরের কন্টেন্টকে চেপে (squash) ফেলে না।
মাউন্টিং (mounting) এবং আনমাউন্টিং (unmounting)-এর জন্য AnimatePresence ব্যবহার করুন। এটি ছাড়া, React এলিমেন্টগুলো অ্যানিমেশন শেষ হওয়ার আগেই DOM থেকে সরিয়ে ফেলে।
height: auto অ্যানিমেট করা এড়িয়ে চলুন। এটি ভিজ্যুয়াল গ্লিচ (visual glitches) তৈরি করে। এর পরিবর্তে, মসৃণ হাইট পরিবর্তনের জন্য একটি CSS grid wrapper (0fr থেকে 1fr) ব্যবহার করুন।
𝗔𝗰𝗰𝗲𝘀𝘀𝗶𝗯𝗶𝗹𝗶𝘁𝘆
প্রায় ৩০% iOS ব্যবহারকারী prefers-reduced-motion চালু রাখেন। শুধুমাত্র সব অ্যানিমেশন বন্ধ করে দেবেন না। এতে আপনার লেআউট ভেঙে যেতে পারে।
ভুল পদ্ধতি: ব্যবহারকারী যদি কম মোশন চান, তবে <motion.div>-কে একটি সাধারণ <div> দিয়ে পরিবর্তন করা। এতে লেআউট হঠাৎ করে লাফিয়ে (snap) ওঠে এবং ভেঙে গেছে বলে মনে হয়।
সঠিক পদ্ধতি: কম্পোনেন্ট নয়, বরং ট্রানজিশনটিকে নিয়ন্ত্রণ (gate) করুন। <motion.div> ঠিক রাখুন কিন্তু এর duration ০ (zero) করে দিন।
এটি ম্যানেজ করার জন্য একটি কাস্টম হুক তৈরি করুন:
useReducedMotionহুকটি ব্যবহার করুন।- যদি
trueহয়, তবেduration০ রিটার্ন করুন। - যদি
falseহয়, তবে আপনার স্ট্যান্ডার্ড স্প্রিং সেটিংস রিটার্ন করুন।
এটি নিশ্চিত করে যে এলিমেন্টগুলো নড়াচড়া ছাড়াই তাদের সঠিক অবস্থানে পৌঁছাবে।
𝗪𝗵𝗲𝗻 𝘁𝗼 𝘂𝘀𝗲 𝗠𝗼𝘁𝗶𝗼𝗻
সাধারণ ফেড (fade) ইফেক্টের জন্য ব্রাউজারের Web Animations API ব্যবহার করুন। এর কোনো ডিপেন্ডেন্সি নেই।
যখন আপনার নিচের বিষয়গুলোর প্রয়োজন হবে, তখন Motion ব্যবহার করুন:
- কম্পোনেন্ট লাইফসাইকেল বুঝতে পারে এমন React-native API।
- DOM পরিবর্তন ট্র্যাক করতে পারে এমন লেআউট অ্যানিমেশন।
- এক্সিট অ্যানিমেশনের জন্য
AnimatePresence। - প্রাকৃতিক অনুভূতির জন্য স্প্রিং ফিজিক্স (Spring physics)।