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

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.

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 এর দায়িত্বে ছেড়ে দিয়ে নিশ্চিন্ত থাকুন।