Framer Motion - যেটুকু জানলাম, সেটুকু লিখলাম পর্ব ১

বুধবার, ২৮ এপ্রিল ২০২১, বিকাল ৭:৩১ সময়

🟡 Framer Motion কী?

এটি মূলত একটি Open Source, জনপ্রিয়, Animation Library যেটি ReactJS Developer দের জন্য বানোনো হয়েছে। এটি তৈরী করেছে Framer. একটি UI Design Software নির্মাতা প্রতিষ্ঠান। Library টির First Release January 2019.

লেখা লেখির অভ্যাস নেই। তাই হয়তো একটু অগোছালো হয়ে যাবে, লিখা গুলো। তাই আগেই ভাগেই ক্ষমা চেয়ে নিচ্ছি।

কোথাও একটা শুনেছিলাম Library'r কথা টা, তো বন্ধু সাদ কে বললাম তুমি যেহেতু Front End Development এ খুবি Active আছো, একটু দেখিয়ে দাও। ব্যাস Discord Live Session শুরু।

শুরুতেই একটা Empty React প্রজেক্ট Create করে নেওয়া হলো।

কোন নতুন কিছু শেখার আগে সবার আগে আমি মনে করি সেই নতুন কিছু দিয়ে কী করা যায় সেটা আগে জেনে নেওয়া। তাই সরাসরি Examples এর দিকে দৌড়।

🔥🔥 তাদের প্রথম Example একটা Box Growing Animation.

Techdiary: Framer Motion Scale Animation
Framer Motion Scale Animation

এটা Raw HTML, CSS এ করতে গেলে প্রথমে হয়তো div element নিয়ে তারপর সেই element কে css দিয়ে Select করে   transition durration, transform scale বা, width & height change করে, এভাবে করতে হতো। কিন্তু Framer Motion দিয়ে তাদের প্রথম Example দেখেই বিস্মিত। এটার জন্য তারা ব্যবহার করেছে এক লাইনের JSX| একে বারে On the go. বোঝা গেল না? Example দিচ্ছি। ধরুন আপনি একটা div Element Render হওয়ার সাথে সাথে Grow Animate করে দেখাতে চান। সেক্ষেত্রে আপনি আপনার div element টাকে just motion.div tag দিয়ে wrap করে scale amount দিয়ে দিলেই আপনার কাজ শেষ। বাকিটা Framer এর দায়িত্বে ছেড়ে দিয়ে নিশ্চিন্ত থাকুন।

<motion.div  animate={{ scale: 2 }}>

	<div>Hello</div>

</motion.div>

তবে হ্যা অবশ্যই ফাইলের শুরুতে import { motion } from "framer-motion"; করে নিতে হবে।

🔥🔥 দ্বিতীয় Example যেটা দেখলাম সেটা হলো Keyframe.

Set a value as an array and Motion will animate through each of these values in turn

- Framer Motion Keyframe Doc

আগের Example হয়তো অবাক হয়েও হননি। তাহলে এবার keyframe টার একটা Example দেখা যাক একটা 

Techdiary: article-image

এটা CSS দিয়ে লিখতে গেলে, 0%, 20%.... 10% ঐভাবে ধরে ধরে তার পর Percent অনুুযায়ী প্রত্যেক block এ লিখে দিতে হতো ভ্যালু গুলো। যেটা কী না, framer motion এতোটা simple করে ফেলেছে।

<motion.div
    animate={{
      scale: [1, 2, 2, 1, 1],
      rotate: [0, 0, 270, 270, 0],
      borderRadius: ["20%", "20%", "50%", "50%", "20%"],
    }}>
<div>Hello</div>
</motion.div>

🔥🔥 এর পর তাদের doc এর example পাতায় আসে চলে আসে Variants

 এটি খুবি মজার একটি API এবং এবং এখানে আপনাকে বলে দিতে হবে আপনার app এর কোন state এ এ কেমন design প্রয়োজন যেমন navigation ম্যানু open থাকলে layout কেমন হবে । আবার বন্ধ থাকলে layout কেমন হবে। এবার state চেঞ্জ করার মাঝের সময় animation দেখানোর দায়িত্ব Framer Motion এর উপর ছেড়ে দিতে পারেন। 

Techdiary: article-image

🔥🔥 Gesture, DragEvent, Motion Values এর মতো আরো জোস জোস জিনিস আছে, সেগুলো পরবর্তী পোষ্টে দেখানোর চেষ্টা করবো।

আপনি চাইলে তাদের অফিসিয়াল ডক ও দেখে আসতে পারেন

https://www.framer.com/api/motion/examples/