আমি Tailwind এবং CSS এর সাথে অ্যানিমেশনের জন্য একটি প্রতিক্রিয়া ইউটিলিটি উপাদান তৈরি করেছি: AnimateIn

আমি কিছু সময়ের জন্য আমার প্রকল্পগুলিতে একই অ্যানিমেশন প্যাটার্ন ব্যবহার করছি এখন পর্দায় উপাদানগুলিকে অ্যানিমেট করতে। এর সহজতম আকারে, আপনার কাছে শূন্যের অস্বচ্ছতার সাথে স্টাইল করা একটি উপাদান থাকবে, তারপরে একটি সেকেন্ডের CSS ট্রানজিশন সহ একটি অস্বচ্ছতার জন্য স্টাইলিং পরিবর্তন করুন।

আমরা ট্রানজিশনের অন্যান্য বৈশিষ্ট্য যোগ করে, সময়কাল পরিবর্তন করে, বিলম্ব যোগ করে বা কাস্টম ইজিং সেট করে এর উপরে তৈরি করতে পারি।

<AnimateIn/> একটি পুনঃব্যবহারযোগ্য প্রতিক্রিয়া উপাদান যা আমি যখনই আমার প্রকল্পগুলিতে দ্রুত কিছু অ্যানিমেশন প্রভাব যুক্ত করতে চাই তখনই আমি ড্রপ করেছি। একটি সাধারণ ইউটিলিটি উপাদান, এটি ন্যূনতম প্রচেষ্টার সাথে তরল, নজরকাড়া অ্যানিমেশন তৈরি করতে টেলউইন্ড ক্লাসের সাথে CSS অ্যানিমেশনকে একত্রিত করে।

চলুন দেখে নেওয়া যাক কিভাবে এটি ব্যবহার করা হয়। কম্পোনেন্ট ইম্পোর্ট করার পর, টেইলউইন্ড ক্লাস সহ রাজ্য from এবং to সংজ্ঞায়িত করুন। অ্যানিমেশনকে প্রাণবন্ত দেখতে <AnimateIn/>- এর মধ্যে লক্ষ্য উপাদানটি মুড়ে দিন।

 import AnimateIn from '../animation/AnimateIn'; <AnimateIn from="opacity-0 scale-90" to="opacity-100 scale-100" duration={500} > <YourComponent /> </AnimateIn>

এখানে একটি সামান্য জটিল উদাহরণ যা একটি শিরোনাম এবং সাবটাইটেলে অ্যানিমেট করতে আরও বৈশিষ্ট্য ব্যবহার করে।

 import AnimateIn from '../animation/AnimateIn'; <header> <AnimateIn as="h1" from="opacity-0 translate-y-32" to="opacity-100 translate-y-0" delay={500} duration={300} className="text-4xl" style={{transitionTimingFunction:"cubic-bezier(0.25, 0.4, 0.55, 1.4)"}} > My Big Headline </AnimateIn> <AnimateIn as="h2" from="opacity-0 scale-0" to="opacity-100 scale-100" delay={800} duration={500} className="text-lg" > This is a subtitle below the headline </AnimateIn> </header>

শিরোনাম উদাহরণে, <AnimateIn/> একটি ফেইড-ইন এর সাথে মিলিত একটি স্লাইডিং প্রভাব তৈরি করতে ব্যবহৃত হয়। প্রতিটি সম্পত্তি অ্যানিমেশনে কীভাবে অবদান রাখে তা এখানে:

• সম্পত্তি as : as="h1" সেট করে, আমরা AnimateIn কে অ্যানিমেশনকে <h1> উপাদান হিসাবে রেন্ডার করতে বলি।

• from এবং to : from বৈশিষ্ট্য শিরোনাম অফ-স্ক্রীন শুরু করে ( translate-y-32 , এটিকে 32 ইউনিট নিচে নিয়ে যাওয়া) এবং অদৃশ্য ( opacity-0 )। প্রপার্টি to শিরোনামটিকে তার চূড়ান্ত অবস্থানে নিয়ে আসে ( translate-y-0 এ ফিরে আসে) এবং এটিকে সম্পূর্ণরূপে দৃশ্যমান করে তোলে ( opacity-100 )।

• duration বৈশিষ্ট্য: অ্যানিমেশনটি অবিলম্বে শুরু হতে সেট করা হয়েছে কোনো বিলম্ব ছাড়াই এবং দ্রুত 300ms চলে।

• className প্রপার্টি: className="text-4xl" ফন্ট সাইজ সেট করতে টেইলউইন্ডের ইউটিলিটি ক্লাস প্রযোজ্য, যার ফলে শিরোনামটি বিশেষভাবে আলাদা হয়।

• style বৈশিষ্ট্য: কাস্টম transitionTimingFunction ( cubic-bezier(0.25, 0.4, 0.55, 1.4) ) অ্যানিমেশনে একটি অনন্য সহজতা যোগ করে, এটি একটি বাউন্সের মতো প্রভাব দেয়।

সাবটাইটেলটি শিরোনামকে পরিপূরক করতে অ্যানিমেশনের একটি ভিন্ন সেট ব্যবহার করে, একটি সমন্বিত ভিজ্যুয়াল প্রবাহ তৈরি করে।

• সম্পত্তি as : এখানে, as="h2" উপাদানটিকে একটি <h2> উপাদান হিসাবে উপস্থাপন করে, একটি সাবটাইটেলের জন্য উপযুক্ত।

• from এবং to : সাবটাইটেলটি শূন্য ( scale-0 ) এবং অদৃশ্য ( opacity-0 ) এ স্কেল করা শুরু হয়, তারপর তার স্বাভাবিক আকার ( scale-100 ) পর্যন্ত স্কেল করে এবং সম্পূর্ণরূপে দৃশ্যমান হয় ( opacity-100 )। এই স্কেলিং প্রভাব, একটি ফেড-ইন এর সাথে যুক্ত, অ্যানিমেশনে গভীরতা যোগ করে।

• delay এবং duration বৈশিষ্ট্য: সাবটাইটেলটি 800ms বিলম্বের পরেও শুরু হয় যাতে শিরোনামটি সম্পূর্ণরূপে অ্যানিমেটেড হওয়ার পরে এটি শুরু হয়। এই স্তব্ধ পদ্ধতি নিশ্চিত করে যে প্রতিটি উপাদান তার ফোকাসের মুহূর্ত পায়।

• className প্রপার্টি: className="text-lg" সাবটাইটেলের ফন্ট সাইজ সেট করে, এটিকে হেডলাইনের থেকে ছোট করে কিন্তু এখনও তাৎপর্যপূর্ণ করে।

কী ঘটছে তা আরও ভালভাবে বোঝার জন্য, আসুন Github-এ <AnimateIn/> এর সোর্স কোডটি দেখি:

<AnimateIn/> একটি useState হুক ব্যবহার করে অ্যানিমেশন স্টেটকে from এর সাথে প্রারম্ভিক করার জন্য, যেটি এক বা একাধিক Tailwind ইউটিলিটি ক্লাস হওয়া উচিত, কোনো অ্যানিমেশন হওয়ার আগে অ্যানিমেশনের শুরুর বিন্দুর জন্য স্টেজ সেট করে।

কম্পোনেন্টে প্রথম useEffect হুক হল কম গতির জন্য ব্যবহারকারীর পছন্দকে সম্মান করার জন্য। (prefers-reduced-motion: reduce) মিডিয়া ক্যোয়ারী শোনার মাধ্যমে, অ্যানিমেশন আচরণ ব্যবহারকারীর সিস্টেম সেটিংসের উপর ভিত্তি করে। যদি কম গতি পছন্দ করা হয়, তবে অ্যানিমেশনটি সম্পূর্ণভাবে এড়িয়ে যায়, সরাসরি অ্যানিমেশন স্টেটকে to সেট করে, একটি অ্যাক্সেসযোগ্য অভিজ্ঞতার জন্য অনুমতি দেয়।

দ্বিতীয় useEffect হুক হল যেখানে অ্যানিমেশন লজিক থাকে। যদি ব্যবহারকারী হ্রাস গতির জন্য একটি অগ্রাধিকার নির্দেশ না করে থাকে, তবে উপাদানটি একটি টাইমার সেট করে যা নির্দিষ্ট বিলম্বের পরে প্রারম্ভিক from মান থেকে চূড়ান্ত মান to অ্যানিমেশন অবস্থা পরিবর্তন করে। এই রূপান্তরটি অ্যানিমেশনের চাক্ষুষ প্রভাব তৈরি করে।

এই হুকের ক্লিনআপ ফাংশন (রিটার্ন স্টেটমেন্ট) টাইমার সাফ করে, সম্ভাব্য মেমরি ফাঁস প্রতিরোধ করে যেমন অ্যানিমেশন সম্পূর্ণ হওয়ার আগে উপাদানটি আনমাউন্ট করা হয়।

React.createElement ফাংশন কল হল কম্পোনেন্টের রেন্ডারিং মেকানিজম। এটি গতিশীলভাবে as prop-এর উপর ভিত্তি করে একটি HTML উপাদান তৈরি করে, যা বিভিন্ন HTML উপাদান জুড়ে উপাদান ব্যবহারের অনুমতি দেয়। shadcn দ্বারা জনপ্রিয় করা cn ফাংশন ব্যবহার করে className তৈরি করা হয়েছে, যা Tailwind-এর ইউটিলিটি ক্লাস, প্রপ হিসাবে পাস করা কাস্টম className এবং বর্তমান অ্যানিমেশন অবস্থাকে একত্রিত করে। এই ডায়নামিক ক্লাস অ্যাসাইনমেন্টটি উপাদানটিতে পছন্দসই শৈলী এবং ট্রানজিশন প্রয়োগ করে।

উপরন্তু, একটি style বৈশিষ্ট্য আছে যা সরাসরি অ্যানিমেশন কন্টেইনারে স্টাইলিং বৈশিষ্ট্য সেট করতে পাস করা যেতে পারে। transitionDuration duration প্রপের উপর ভিত্তি করে সেট করা হয়, তবে ব্যবহারকারী যদি কম গতি পছন্দ করে তবে এটি বুদ্ধিমত্তার সাথে 0ms এ স্যুইচ করে, কার্যকরভাবে কম্পোনেন্টের কার্যকারিতা বজায় রেখে অ্যানিমেশন অক্ষম করে।

আপনি যদি আপনার নিজের প্রজেক্টে <AnimateIn/> ব্যবহার করতে চান এবং এটি ইতিমধ্যেই shadcn ব্যবহার করে, তাহলে আপনার কাছে ইতিমধ্যেই আপনার প্রয়োজনীয় সবকিছু আছে, শুধু AnimateIn.tsx ডাউনলোড করুন এবং আপনার উপাদানগুলিতে যোগ করুন।

অন্যথায়, আপনি Tailwind ইনস্টল করতে চাইবেন পাশাপাশি mxcn টেইলউইন্ড ক্লাস মার্জ করার জন্য সহায়ক ইউটিলিটি ।

shadcn-এর মতো, <AnimateIn/> হল একটি পুনঃব্যবহারযোগ্য উপাদান যা আপনি কপি করে আপনার অ্যাপে পেস্ট করতে পারেন এবং আপনার প্রয়োজন অনুযায়ী কাস্টমাইজ করতে পারেন। কোড আপনার.

এছাড়াও, আমি animate-in.vercel.app- এ <AnimateIn/>- এর সাথে বিভিন্ন অ্যানিমেশন তৈরি করে খেলার জন্য একটি চমৎকার ডেমো পৃষ্ঠা একত্রিত করেছি।

এছাড়াও এখানে প্রকাশিত