প্রতিটি স্ক্রীনের আকার এবং ডিভাইসের জন্য প্রতিক্রিয়াশীল অ্যানিমেশন

আমি ক্যারিয়ারের উন্নয়নে ঝাঁপিয়ে পড়ার আগে, আমি আফটার ইফেক্টস-এ একগুচ্ছ মোশন গ্রাফিক্স কাজ করেছি। কিন্তু সেই পটভূমিতেও, আমি এখনও ওয়েবে অ্যানিমেটিংকে বেশ চমকপ্রদ দেখতে পেয়েছি।

ভিডিও গ্রাফিক্স একটি নির্দিষ্ট অনুপাতের মধ্যে ডিজাইন করা হয় এবং তারপর রপ্তানি করা হয়। সম্পন্ন! কিন্তু ওয়েবে কোনো "রপ্তানি সেটিংস" নেই। আমরা কেবল কোডটিকে বিশ্বের মধ্যে ঠেলে দিই এবং আমাদের অ্যানিমেশনগুলি যে ডিভাইসে ল্যান্ড করে তার সাথে মানিয়ে নিতে হবে।

তাই আসুন প্রতিক্রিয়াশীল অ্যানিমেশনের কথা বলি! বন্য বন্য ওয়েবে অ্যানিমেট করার জন্য আমরা কীভাবে সর্বোত্তমভাবে যেতে পারি? আমরা কিছু সাধারণ পন্থা, কিছু GSAP-নির্দিষ্ট টিপস এবং কিছু গতি নীতিগুলি কভার করতে যাচ্ছি। চলুন শুরু করা যাক কিছু ফ্রেমিং দিয়ে...

কিভাবে এই অ্যানিমেশন ব্যবহার করা হবে?

প্রতিক্রিয়াশীল অ্যানিমেশনের উপর Zach Saucier এর নিবন্ধ কোডে ঝাঁপ দেওয়ার আগে চূড়ান্ত ফলাফল সম্পর্কে চিন্তা করার জন্য একটি পদক্ষেপ পিছিয়ে নেওয়ার পরামর্শ দেয়।

অ্যানিমেশনটি কি এমন একটি মডিউল হবে যা আপনার অ্যাপ্লিকেশনের একাধিক অংশ জুড়ে পুনরাবৃত্তি হয়? এটা সব স্কেল প্রয়োজন? এটি মাথায় রাখা একটি অ্যানিমেশনকে স্কেল করা উচিত এমন পদ্ধতি নির্ধারণ করতে এবং আপনাকে প্রচেষ্টা নষ্ট করা থেকে রক্ষা করতে সহায়তা করতে পারে।

এই মহান উপদেশ. ক প্রচুর প্রতিক্রিয়াশীল অ্যানিমেশন ডিজাইন করার একটি অংশ হল সেই অ্যানিমেশনটিকে কীভাবে মাপতে হবে তা জানা এবং তারপর শুরু থেকেই সঠিক পদ্ধতি বেছে নেওয়া।

বেশিরভাগ অ্যানিমেশন নিম্নলিখিত বিভাগে পড়ে:

• ফিক্সড: আইকন বা লোডারের মতো জিনিসগুলির জন্য অ্যানিমেশন যা সমস্ত ডিভাইসে একই আকার এবং আকৃতির অনুপাত বজায় রাখে। এখানে চিন্তা করার কিছু নেই! সেখানে কিছু পিক্সেল মান হার্ড-কোড করুন এবং আপনার দিনের সাথে এগিয়ে যান।
• তরল: অ্যানিমেশন যা বিভিন্ন ডিভাইস জুড়ে তরলভাবে মানিয়ে নিতে হবে। বেশিরভাগ লেআউট অ্যানিমেশন এই বিভাগে পড়ে।
• টার্গেটেড: অ্যানিমেশন যা একটি নির্দিষ্ট ডিভাইস বা স্ক্রিনের আকারের জন্য নির্দিষ্ট, বা নির্দিষ্ট ব্রেকপয়েন্টে যথেষ্ট পরিবর্তিত হয়, যেমন শুধুমাত্র ডেস্কটপ অ্যানিমেশন বা মিথস্ক্রিয়া যা ডিভাইস-নির্দিষ্ট ইন্টারঅ্যাকশনের উপর নির্ভর করে, যেমন স্পর্শ বা হোভার।

তরল এবং লক্ষ্যযুক্ত অ্যানিমেশনের চিন্তাভাবনা এবং সমাধানের বিভিন্ন উপায় প্রয়োজন। একবার দেখা যাক…

তরল অ্যানিমেশন

As অ্যান্ডি বেল বলেছেন: ব্রাউজারের পরামর্শদাতা হোন, এর মাইক্রোম্যানেজার নয় — ব্রাউজারকে কিছু কঠিন নিয়ম এবং ইঙ্গিত দিন, তারপরে এটিকে যারা ভিজিট করে তাদের জন্য সঠিক সিদ্ধান্ত নিতে দিন। (এখানে স্লাইড সেই উপস্থাপনা থেকে।)

ফ্লুইড অ্যানিমেশন হল ব্রাউজারকে কঠোর পরিশ্রম করতে দেওয়া। অনেক অ্যানিমেশন শুরু থেকে সঠিক ইউনিট ব্যবহার করে সহজেই বিভিন্ন প্রসঙ্গের সাথে সামঞ্জস্য করতে পারে। আপনি যদি এই পেনটির আকার পরিবর্তন করেন তবে আপনি দেখতে পাবেন যে অ্যানিমেশন ব্যবহার করে ভিউপোর্ট ইউনিট ব্রাউজার সামঞ্জস্য করার সাথে সাথে তরলভাবে স্কেল করে:

বেগুনি বাক্স এমনকি বিভিন্ন ব্রেকপয়েন্টে প্রস্থ পরিবর্তন করে, কিন্তু আমরা এটি সরানোর জন্য শতাংশ ব্যবহার করছি, অ্যানিমেশন স্কেলও এটির সাথে।

অ্যানিমেটিং লেআউট বৈশিষ্ট্য মত left এবং top লেআউট রিফ্লো এবং জটলা 'জাঙ্কি' অ্যানিমেশন সৃষ্টি করতে পারে, তাই যেখানে সম্ভব রূপান্তর এবং অস্বচ্ছতার সাথে লেগে থাকুন।

যদিও আমরা কেবল এই ইউনিটগুলিতে সীমাবদ্ধ নই - আসুন কিছু অন্যান্য সম্ভাবনার দিকে নজর দেওয়া যাক।

এসভিজি ইউনিট

SVG এর সাথে কাজ করার বিষয়ে আমি যে জিনিসগুলি পছন্দ করি তা হল যে আমরা অ্যানিমেশনের জন্য SVG ব্যবহারকারী ইউনিটগুলি ব্যবহার করতে পারি যা বাক্সের বাইরে প্রতিক্রিয়াশীল। ক্লুটি আসলেই নামে রয়েছে - আকার পরিবর্তনযোগ্য ভেক্টর গ্রাফিক। SVG-ভূমিতে, সমস্ত উপাদান নির্দিষ্ট স্থানাঙ্কে প্লট করা হয়। SVG স্থান হল গ্রাফ পেপারের একটি অসীম বিটের মত যেখানে আমরা উপাদানগুলিকে সাজাতে পারি। দ্য viewBox আমরা যে গ্রাফ পেপার দেখতে পাচ্ছি তার মাত্রা নির্ধারণ করে।

viewBox="0 0 100 50”

এই পরবর্তী ডেমোতে, আমাদের SVG viewBox is 100 ইউনিট প্রশস্ত এবং 50 একক লম্বা। এর মানে হল যদি আমরা উপাদানটিকে অ্যানিমেট করি 100 x-অক্ষ বরাবর একক, এটি সর্বদা তার প্যারেন্ট SVG-এর সম্পূর্ণ প্রস্থ দ্বারা সরবে, SVG যত বড় বা ছোট হোক না কেন! ডেমো দেখার জন্য একটি রিসাইজ দিন।

প্যারেন্ট কন্টেইনারের প্রস্থের উপর ভিত্তি করে একটি চাইল্ড এলিমেন্ট অ্যানিমেট করা HTML-ল্যান্ডে একটু কৌশলী। এখন অবধি, আমাদের জাভাস্ক্রিপ্টের সাহায্যে পিতামাতার প্রস্থ ধরতে হয়েছিল, যা আপনি অ্যানিমেটিং করার সময় যথেষ্ট সহজ from একটি রূপান্তরিত অবস্থান, কিন্তু আপনি যখন অ্যানিমেটিং করছেন তখন একটু বাঁকা to কোথাও আপনি নিম্নলিখিত ডেমো দেখতে পারেন হিসাবে. যদি আপনার শেষ-বিন্দু একটি রূপান্তরিত অবস্থান হয় এবং আপনি স্ক্রীনের আকার পরিবর্তন করেন তবে আপনাকে ম্যানুয়ালি সেই অবস্থানটি সামঞ্জস্য করতে হবে। অগোছালো… 🤔

আপনি যদি আকার পরিবর্তনের মানগুলি সামঞ্জস্য করেন তবে মনে রাখবেন debounce, অথবা ব্রাউজারের আকার পরিবর্তন করা শেষ হওয়ার পরেও ফাংশনটি ফায়ার করুন। রিসাইজ শ্রোতারা প্রতি সেকেন্ডে এক টন ইভেন্ট ফায়ার করে, তাই প্রতিটি ইভেন্টে বৈশিষ্ট্য আপডেট করা ব্রাউজারের জন্য অনেক কাজ।

কিন্তু, এই অ্যানিমেশন স্পিড-বাম্প শীঘ্রই অতীতের জিনিস হতে চলেছে! ড্রাম রোল দয়া করে... 🥁

প্রায় 15 বছর পর একটি অত্যন্ত অনুরোধ করা (অসম্ভব!?) বৈশিষ্ট্য হিসাবে, আকার-ভিত্তিক কন্টেইনার কোয়েরি এবং ইউনিটগুলি Chrome/Edge 105 এবং Safari 16 উভয় ক্ষেত্রেই পাঠানো হয়েছে! ফায়ারফক্স পিছিয়ে নেই।

(এছাড়াও: শৈলী প্রশ্নের একটি প্রোটোটাইপ আছে!)https://t.co/A2zgd9l4FC

— মিয়া (@TerribleMia) সেপ্টেম্বর 15, 2022

কন্টেইনার ইউনিট! সুন্দর জিনিস. যখন আমি এটি লিখছি, তারা শুধুমাত্র Chrome এবং Safari-এ কাজ করে — কিন্তু আপনি যখন এটি পড়বেন, তখন আমাদের কাছে Firefoxও থাকবে। এই পরবর্তী ডেমোতে কর্মে তাদের পরীক্ষা করে দেখুন। ঐ ছোট ছেলেদের যাও দেখুন! কি উত্তেজনাপূর্ণ নয়, অ্যানিমেশন যা পিতামাতার উপাদানগুলির সাথে সম্পর্কিত!

FLIP এর সাথে ফ্লুইড লেআউট ট্রানজিশন

যেমনটি আমরা আগে উল্লেখ করেছি, SVG-ল্যান্ডে প্রতিটি উপাদান সুন্দরভাবে একটি গ্রিডে স্থাপন করা হয় এবং প্রতিক্রিয়াশীলভাবে চলাফেরা করা সত্যিই সহজ। HTML-ল্যান্ডে এটি অনেক বেশি জটিল। প্রতিক্রিয়াশীল লেআউট তৈরি করার জন্য, আমরা বিভিন্ন পজিশনিং পদ্ধতি এবং লেআউট সিস্টেমের একটি গুচ্ছ ব্যবহার করি। ওয়েবে অ্যানিমেট করার প্রধান অসুবিধাগুলির মধ্যে একটি হল এটি অনেক লেআউটের পরিবর্তনগুলি অ্যানিমেট করা অসম্ভব। হয়তো একটি উপাদান অবস্থান থেকে সরানো প্রয়োজন relative থেকে fixed, অথবা একটি ফ্লেক্স পাত্রের কিছু বাচ্চাদের ভিউপোর্টের চারপাশে মসৃণভাবে এলোমেলো করা দরকার। হতে পারে এমন একটি উপাদানকে পুনরায় অভিভাবক করা এবং DOM-এ সম্পূর্ণ নতুন অবস্থানে স্থানান্তরিত করা প্রয়োজন।

চতুর, হাহ?

আমরা হব. FLIP কৌশল দিন বাঁচাতে এখানে; এটি আমাদের এই অসম্ভব জিনিসগুলিকে সহজেই অ্যানিমেট করতে দেয়। মূল ভিত্তি হল:

• প্রথম: রূপান্তরের সাথে জড়িত উপাদানগুলির প্রাথমিক অবস্থান ধরুন।
• গত: উপাদান সরান এবং চূড়ান্ত অবস্থান দখল.
• ত্তলটান: প্রথম এবং শেষ অবস্থার মধ্যে পরিবর্তনগুলি কাজ করুন এবং উপাদানগুলিকে তাদের আসল অবস্থানে ফিরিয়ে আনতে রূপান্তরগুলি প্রয়োগ করুন৷ এটি উপাদানগুলি এখনও রয়েছে বলে মনে করে প্রথম অবস্থান কিন্তু তারা আসলে না.
• খেলা: উল্টানো রূপান্তর সরান এবং তাদের এনিমেট ছদ্ম প্রথম রাজ্য থেকে গত অবস্থা.

এখানে GSAP এর FLIP প্লাগইন ব্যবহার করে একটি ডেমো রয়েছে যা আপনার জন্য সমস্ত ভারী উত্তোলন করে!

আপনি যদি ভ্যানিলা বাস্তবায়ন সম্পর্কে আরও কিছু বুঝতে চান তবে পল লুইসের দিকে যান ব্লগ পোস্ট — তিনি FLIP কৌশলের পিছনে মস্তিষ্ক।

তরলভাবে SVG স্কেলিং

তুমি আমাকে পেয়েছ... এটা নয় সত্যিই একটি অ্যানিমেশন টিপ। কিন্তু সঠিকভাবে স্টেজ সেট করা ভাল অ্যানিমেশনের জন্য অপরিহার্য! SVG ডিফল্টভাবে খুব সুন্দরভাবে স্কেল করে, কিন্তু আমরা নিয়ন্ত্রণ করতে পারি এটি কীভাবে আরও বেশি স্কেল করে preserveAspectRatio, যা মেগা সহজ যখন SVG উপাদানের আকৃতির অনুপাত এবং viewBox আকৃতির অনুপাত ভিন্ন। এটি অনেকটা একই ভাবে কাজ করে background-position এবং background-size CSS-এ বৈশিষ্ট্য। ঘোষণা একটি প্রান্তিককরণ মান দ্বারা গঠিত (background-position) এবং ক সম্মেলন or ফালি রেফারেন্স (background-size).

সেই মিট এবং স্লাইস রেফারেন্সগুলির জন্য - slice মত background size: cover, এবং meet মত background-size: contain.

• preserveAspectRatio="MidYMax slice" — x-অক্ষের মাঝখানে, y-অক্ষের নীচে সারিবদ্ধ করুন এবং পুরো ভিউপোর্টকে কভার করতে স্কেল করুন।
• preserveAspectRatio="MinYMin meet" — x-অক্ষের বাম দিকে, y-অক্ষের শীর্ষে সারিবদ্ধ করুন এবং পুরোটা রেখে স্কেল করুন viewBox দৃশ্যমান।

টম মিলার এটি ব্যবহার করে আরও এক ধাপ এগিয়ে নেয় overflow: visible CSS-এ এবং উচ্চতা সীমাবদ্ধ রাখার সময় "মঞ্চ বাম" এবং "মঞ্চ ডান" প্রকাশ করার জন্য একটি ধারণকারী উপাদান:

প্রতিক্রিয়াশীল SVG অ্যানিমেশনগুলির জন্য, SVG ভিউবক্স ব্যবহার করে এমন একটি দৃশ্য তৈরি করা সহজ হতে পারে যা একটি নির্দিষ্ট ব্রাউজার প্রস্থের নীচে ক্রপ করে এবং স্কেল করে, যখন ব্রাউজারটি তার চেয়ে প্রশস্ত হয় তখন ডান এবং বামে আরও বেশি SVG অ্যানিমেশন প্রকাশ করে। প্রান্তিক আমরা এসভিজিতে দৃশ্যমান ওভারফ্লো যোগ করে এবং এটিকে a এর সাথে দলবদ্ধ করে এটি অর্জন করতে পারি max-height SVG কে উল্লম্বভাবে খুব বেশি স্কেলিং থেকে আটকাতে মোড়ক।

ফ্লুইডলি স্কেলিং ক্যানভাস

জটিল অ্যানিমেশনের জন্য ক্যানভাস অনেক বেশি পারফরম্যান্স প্রচুর SVG বা HTML DOM অ্যানিমেট করার চেয়ে চলমান অংশগুলির, কিন্তু এটি সহজাতভাবে আরও জটিল। আপনাকে সেই কর্মক্ষমতা লাভের জন্য কাজ করতে হবে! SVG এর বিপরীতে যেটিতে সুন্দর প্রতিক্রিয়াশীল ইউনিট রয়েছে এবং বাক্সের বাইরে স্কেলিং রয়েছে, চারপাশে বস করতে হবে এবং কিছুটা মাইক্রোম্যানেজ করতে হবে।

আমি আমার সেট আপ পছন্দ যাতে এটি SVG (আমি পক্ষপাতদুষ্ট হতে পারি) এর মতো একইভাবে কাজ করে যার মধ্যে কাজ করার জন্য একটি সুন্দর ইউনিট সিস্টেম এবং একটি নির্দিষ্ট আকৃতির অনুপাত। প্রতিবার কিছু পরিবর্তন করার সময়ও পুনরায় অঙ্কন করতে হবে, তাই ব্রাউজারটির আকার পরিবর্তন করা শেষ না হওয়া পর্যন্ত পুনরায় অঙ্কন করতে দেরি করতে ভুলবেন না বা ডিবাউন্স করুন!

জর্জ ফ্রান্সিস এছাড়াও এই একসাথে করা সুন্দর ছোট লাইব্রেরি যা আপনাকে একটি ক্যানভাস সংজ্ঞায়িত করতে দেয় viewBox বৈশিষ্ট্য এবং preserveAspectRatio — ঠিক SVG এর মত!

টার্গেটেড অ্যানিমেশন

আপনার অ্যানিমেশনে কখনও কখনও কম তরল এবং আরও নির্দেশিত পদ্ধতির প্রয়োজন হতে পারে। মোবাইল ডিভাইসে অনেক কম রিয়েল এস্টেট আছে, এবং একটি ডেস্কটপ মেশিনের তুলনায় কম অ্যানিমেশন-জুস কর্মক্ষমতা অনুযায়ী। তাই মোবাইল ব্যবহারকারীদের কাছে কম অ্যানিমেশন পরিবেশন করাটা বোধগম্য, সম্ভাব্য এমনকি কোনো অ্যানিমেশন নেই:

কখনও কখনও মোবাইলের জন্য সেরা প্রতিক্রিয়াশীল অ্যানিমেশন মোটেই কোনও অ্যানিমেশন নয়! মোবাইল UX-এর জন্য, অ্যানিমেশন শেষ হওয়ার অপেক্ষায় ব্যবহারকারীকে দ্রুত সামগ্রী গ্রাস করতে দেওয়াকে অগ্রাধিকার দিন। মোবাইল অ্যানিমেশনগুলি দেরি না করে বিষয়বস্তু, নেভিগেশন এবং মিথস্ক্রিয়াকে উন্নত করা উচিত। এরিক ভ্যান হোল্টজ

এটি করার জন্য, আমরা নির্দিষ্ট ভিউপোর্ট আকারগুলিকে লক্ষ্য করার জন্য মিডিয়া প্রশ্নগুলি ব্যবহার করতে পারি ঠিক যেমন আমরা করি যখন আমরা CSS এর সাথে স্টাইল করি! এখানে একটি সাধারণ ডেমো দেখানো হচ্ছে একটি CSS অ্যানিমেশন মিডিয়া কোয়েরি ব্যবহার করে পরিচালনা করা হচ্ছে এবং একটি GSAP অ্যানিমেশন পরিচালনা করা হচ্ছে gsap.matchMedia():

এই ডেমোর সরলতা লুকিয়ে আছে একগুচ্ছ জাদু! জাভাস্ক্রিপ্ট অ্যানিমেশনগুলি শুধুমাত্র একটি নির্দিষ্ট স্ক্রীন আকারে সঠিকভাবে কাজ করার জন্য একটু বেশি সেটআপ এবং পরিষ্কার-পরিচ্ছন্নতার প্রয়োজন। আমি অতীতে ভয়াবহতা দেখেছি যেখানে লোকেরা কেবলমাত্র সিএসএস-এর সাথে অ্যানিমেশনটি লুকিয়ে রেখেছে opacity: 0, কিন্তু অ্যানিমেশন এখনও রিসোর্স ব্যবহার করে ব্যাকগ্রাউন্ডে দূরে সরে যাচ্ছে। 😱

যদি স্ক্রিনের আকার আর মেলে না, তাহলে অ্যানিমেশনটিকে মেরে ফেলতে হবে এবং আবর্জনা সংগ্রহের জন্য ছেড়ে দিতে হবে, এবং অ্যানিমেশনের দ্বারা প্রভাবিত উপাদানগুলিকে অন্য স্টাইলিং-এর সাথে দ্বন্দ্ব রোধ করার জন্য যেকোনো গতি-প্রবর্তিত ইনলাইন শৈলী থেকে পরিষ্কার করতে হবে। এখন পর্যন্ত gsap.matchMedia(), এই ছিল একটি fiddly প্রক্রিয়া. আমাদের প্রতিটি অ্যানিমেশনের ট্র্যাক রাখতে হয়েছিল এবং এই সমস্ত ম্যানুয়ালি পরিচালনা করতে হয়েছিল।

gsap.matchMedia() পরিবর্তে আপনি সহজেই আপনার অ্যানিমেশন কোডকে একটি ফাংশনে প্রবেশ করতে দেয় যা শুধুমাত্র একটি নির্দিষ্ট সময়ে কার্যকর হয় মিডিয়া ক্যোয়ারী মেলে তারপর, যখন এটি আর মেলে না, সমস্ত GSAP অ্যানিমেশন এবং ScrollTriggers যে ফাংশন স্বয়ংক্রিয়ভাবে ফিরে পেতে. মিডিয়া ক্যোয়ারী যে অ্যানিমেশনগুলি পপ করা হয়েছে তা আপনার জন্য সমস্ত কঠোর পরিশ্রম করে৷ এটি GSAP 3.11.0 এ রয়েছে এবং এটি একটি গেম চেঞ্জার!

আমরা শুধু পর্দার আকারে সীমাবদ্ধ নই। আছে একটি মিডিয়া বৈশিষ্ট্য টন আউট আছে মধ্যে হুক!

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

নিম্নলিখিত ডেমোতে আমরা একটি চেক যোগ করেছি prefers-reduced-motion যাতে যেকোন ব্যবহারকারী যারা অ্যানিমেশন বিভ্রান্তিকর খুঁজে পান তারা আশেপাশে ঘোরাঘুরির কারণে বিরক্ত না হন।

এবং টম মিলারের অন্যান্য মজার ডেমো দেখুন যেখানে তিনি অ্যানিমেশন সামঞ্জস্য করতে ডিভাইসের আকৃতির অনুপাত ব্যবহার করছেন:

পর্দার মাপ ছাড়িয়ে বাক্সের বাইরে চিন্তা করা

শুধুমাত্র স্ক্রীনের আকারের চেয়ে প্রতিক্রিয়াশীল অ্যানিমেশন সম্পর্কে চিন্তা করার আরও অনেক কিছু আছে। বিভিন্ন ডিভাইস বিভিন্ন ইন্টারঅ্যাকশনের জন্য অনুমতি দেয়, এবং আপনি যখন এটি বিবেচনা করবেন না তখন কিছুটা জটিলতার মধ্যে থাকা সহজ। আপনি যদি CSS-এ হোভার স্টেট তৈরি করেন, আপনি ব্যবহার করতে পারেন hover মিডিয়া বৈশিষ্ট্য ব্যবহারকারীর কিনা পরীক্ষা করতে প্রাথমিক ইনপুট মেকানিজম এলিমেন্টের উপর ঘুরতে পারে।

@media (hover: hover) {
 /* CSS hover state here */
}

থেকে কিছু পরামর্শ জেক হোয়াইটলি:

অনেক সময় আমরা আমাদের অ্যানিমেশনগুলিকে ব্রাউজারের প্রস্থের উপর ভিত্তি করে তৈরি করি, এই নিরীহ ধারণা তৈরি করে যে ডেস্কটপ ব্যবহারকারীরা হোভার স্টেট চান। আমি ব্যক্তিগতভাবে অতীতে অনেক সমস্যায় পড়েছি যেখানে আমি ডেস্কটপ লেআউট >1024px এ স্যুইচ করতাম, কিন্তু JS-এ টাচ ডিটেকশন করতে পারতাম - যার ফলে লেআউটটি ডেস্কটপের জন্য ছিল, কিন্তু JS মোবাইলের জন্য ছিল। আজকাল আমি প্যারিটি নিশ্চিত করতে হোভার এবং পয়েন্টারে ঝুঁকে পড়ি এবং আইপ্যাড প্রোস বা উইন্ডোজ সারফেসগুলিকে হ্যান্ডেল করি (যা কভারটি নিচে আছে কি না তার উপর নির্ভর করে পয়েন্টারের প্রকার পরিবর্তন করতে পারে)

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

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

ScrollTrigger টিপস

আপনি যদি জিএসএপি ব্যবহার করেন ScrollTrigger প্লাগইন, একটি সহজ সামান্য ইউটিলিটি রয়েছে যা আপনি সহজেই ডিভাইসের স্পর্শ ক্ষমতাগুলি বুঝতে পারেন: ScrollTrigger.isTouch.

• 0 - কোন স্পর্শ (শুধুমাত্র পয়েন্টার/মাউস)
• 1 - শুধুমাত্র স্পর্শ ডিভাইস (একটি ফোনের মত)
• 2 - ডিভাইস গ্রহণ করতে পারে স্পর্শ ইনপুট এবং মাউস পয়েন্টার (উইন্ডোজ ট্যাবলেটের মত)

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

প্রতিক্রিয়াশীল স্ক্রোল-ট্রিগারড অ্যানিমেশনের জন্য আরেকটি টিপ...

নিচের ডেমোটি একটি ইমেজ গ্যালারিকে অনুভূমিকভাবে সরানো হচ্ছে, কিন্তু প্রস্থটি পর্দার আকারের উপর নির্ভর করে পরিবর্তিত হয়। স্ক্রাব করা অ্যানিমেশনের অর্ধেক পথ অতিক্রম করার সময় আপনি যদি স্ক্রীনের আকার পরিবর্তন করেন, তাহলে আপনি ভাঙা অ্যানিমেশন এবং পুরানো মান দিয়ে শেষ করতে পারেন। এটি একটি সাধারণ স্পিডবাম্প, তবে এটি সহজেই সমাধান করা যায়! স্ক্রিনের আকারের উপর নির্ভরশীল গণনাটিকে একটি কার্যকরী মান এবং সেটে পপ করুন invalidateOnRefresh:true. এইভাবে, ব্রাউজারটি পুনরায় আকার দিলে ScrollTrigger আপনার জন্য সেই মানটি পুনরায় গণনা করবে।

বোনাস জিএসএপি নের্ড টিপ!

মোবাইল ডিভাইসে, ব্রাউজার অ্যাড্রেস বার সাধারণত দেখায় এবং লুকিয়ে থাকে যখন আপনি স্ক্রোল করেন। এটি একটি রিসাইজ ইভেন্ট হিসাবে গণনা করে এবং একটি বন্ধ হয়ে যাবে ScrollTrigger.refresh(). এটি আদর্শ নাও হতে পারে কারণ এটি আপনার অ্যানিমেশনে লাফ দিতে পারে। GSAP 3.10 যোগ করা হয়েছে ignoreMobileResize. এটি ব্রাউজার বার কীভাবে আচরণ করে তা প্রভাবিত করে না, তবে এটি বাধা দেয় ScrollTrigger.refresh() জন্য গুলি চালানো থেকে ছোট উল্লম্ব আকার পরিবর্তন শুধুমাত্র স্পর্শ ডিভাইস.

ScrollTrigger.config({
  ignoreMobileResize: true
});

গতি নীতি

আমি ভেবেছিলাম যে ওয়েবে গতি নিয়ে কাজ করার সময় বিবেচনা করার জন্য আমি আপনাকে কিছু সেরা অভ্যাস রেখে দেব।

দূরত্ব এবং সহজীকরণ

একটি ছোট কিন্তু গুরুত্বপূর্ণ জিনিস যা রেসপন্সিভ অ্যানিমেশনের সাথে ভুলে যাওয়া সহজ তা হল গতি, ভরবেগ এবং দূরত্বের মধ্যে সম্পর্ক! ভালো অ্যানিমেশন বাস্তব বিশ্বের অনুকরণ করা উচিত বিশ্বাসযোগ্য বোধ করতে, এবং এটি একটি বৃহত্তর দূরত্ব কভার করতে বাস্তব জগতে আরও বেশি সময় লাগে৷ আপনার অ্যানিমেশনটি যে দূরত্বে ভ্রমণ করছে তার দিকে মনোযোগ দিন এবং নিশ্চিত করুন যে ব্যবহৃত সময়কাল এবং সহজীকরণ অন্যান্য অ্যানিমেশনের প্রসঙ্গে বোঝা যায়।

আপনি প্রায়শই বর্ধিত গতি দেখানোর জন্য আরও ভ্রমণের সাথে উপাদানগুলিতে আরও নাটকীয় সহজীকরণ প্রয়োগ করতে পারেন:

নির্দিষ্ট ব্যবহারের ক্ষেত্রে স্ক্রিনের প্রস্থের উপর ভিত্তি করে আরও গতিশীলভাবে সময়কাল সামঞ্জস্য করা সহায়ক হতে পারে। এই পরবর্তী ডেমোতে আমরা ব্যবহার করছি gsap.utils আমরা বর্তমান থেকে ফিরে পেতে মান ক্ল্যাম্প window.innerWidth একটি যুক্তিসঙ্গত পরিসরে, তারপরে আমরা সেই সংখ্যাটিকে একটি মেয়াদে ম্যাপ করছি৷

ব্যবধান এবং পরিমাণ

আরেকটি জিনিস মনে রাখতে হবে তা হল বিভিন্ন স্ক্রিনের আকারে উপাদানগুলির ব্যবধান এবং পরিমাণ। উদ্ধৃতি স্টিভেন শ:

আপনার যদি কিছু ধরণের পরিবেশগত অ্যানিমেশন (প্যারালাক্স, মেঘ, গাছ, কনফেটি, সজ্জা ইত্যাদি) থাকে যা জানালার চারপাশে ফাঁকা থাকে, তবে নিশ্চিত করুন যে সেগুলি স্ক্রীনের আকারের উপর নির্ভর করে স্কেল এবং/অথবা পরিমাণ সামঞ্জস্য করে। বড় পর্দায় সম্ভবত আরও উপাদানের প্রয়োজন হয় জুড়ে, যখন ছোট পর্দায় একই প্রভাবের জন্য শুধুমাত্র কয়েকটির প্রয়োজন হয়।

আমি কিভাবে ভালোবাসি ওফার বিষ্ণিয়া অ্যানিমেশনকে একটি স্টেজ হিসাবে চিন্তা করে। উপাদান যোগ করা এবং অপসারণ করা শুধুমাত্র একটি আনুষ্ঠানিকতা হতে হবে না, এটি সামগ্রিক কোরিওগ্রাফির অংশ হতে পারে।

প্রতিক্রিয়াশীল অ্যানিমেশন ডিজাইন করার সময়, চ্যালেঞ্জটি হল একই বিষয়বস্তুকে ভিউপোর্টে কীভাবে ক্র্যাম করা যায় যাতে এটি "ফিট" হয়, বরং কীভাবে বিদ্যমান বিষয়বস্তুর সেটকে কিউরেট করা যায় যাতে এটি একই অভিপ্রায়ের সাথে যোগাযোগ করে। এর মানে কোন টুকরা বিষয়বস্তু যোগ করতে হবে এবং কোনটি সরাতে হবে তা সচেতনভাবে পছন্দ করা। সাধারণত অ্যানিমেশনের জগতে জিনিসগুলি কেবল ফ্রেমের ভিতরে বা বাইরে আসে না। উপাদানগুলিকে "পর্যায়ে" প্রবেশ করা বা প্রস্থান করার মত মনে করা বোধগম্য হয়, সেই রূপান্তরটিকে এমনভাবে অ্যানিমেট করা যা ভিজ্যুয়াল এবং থিম্যাটিক সেন্স করে।

এবং যে অনেক. আপনার যদি আরও প্রতিক্রিয়াশীল অ্যানিমেশন টিপস থাকে তবে সেগুলি মন্তব্য বিভাগে পপ করুন৷ যদি খুব সহায়ক কিছু থাকে তবে আমি সেগুলিকে তথ্যের এই সংমিশ্রণে যুক্ত করব!

অভিযোজ্য বস্তু

থেকে আরো একটি নোট টম মিলার যেহেতু আমি এই নিবন্ধটি প্রস্তুত করছিলাম:

আপনার প্রতিক্রিয়াশীল অ্যানিমেশন নিবন্ধের জন্য এই টিপটি নিয়ে আমি সম্ভবত খুব দেরি করে ফেলেছি, তবে আমি "বিল্ডিংয়ের আগে সমস্ত অ্যানিমেশন চূড়ান্ত করার" সুপারিশ করছি। আমি বর্তমানে "মোবাইল সংস্করণ" সহ কিছু সাইট অ্যানিমেশন পুনরুদ্ধার করছি। জন্য ঈশ্বরকে ধন্যবাদ gsap.matchMedia… তবে আমি নিশ্চিত যে আমরা জানতাম যে প্রথম থেকেই আলাদা মোবাইল লেআউট/অ্যানিমেশন থাকবে।

আমি মনে করি আমরা সকলেই প্রশংসা করি যে "আগামী পরিকল্পনা" করার এই টিপটি একেবারে শেষ মুহূর্তে এসেছে। ধন্যবাদ, টম, এবং সেই রেট্রোফিটের জন্য শুভকামনা।