ہر سکرین کے سائز اور ڈیوائس کے لیے ذمہ دار متحرک تصاویر

اس سے پہلے کہ میں اپنے کیریئر کی ترقی میں کودوں، میں نے افٹر ایفیکٹس میں موشن گرافکس کے کام کا ایک گروپ کیا۔ لیکن اس پس منظر کے باوجود، میں نے پھر بھی ویب پر حرکت پذیری کو کافی حیران کن پایا۔

ویڈیو گرافکس کو ایک مخصوص تناسب کے اندر ڈیزائن کیا جاتا ہے اور پھر برآمد کیا جاتا ہے۔ ہو گیا! لیکن ویب پر کوئی "برآمد ترتیبات" نہیں ہیں۔ ہم صرف کوڈ کو دنیا میں دھکیلتے ہیں اور ہماری اینیمیشنز کو کسی بھی ڈیوائس کے مطابق ڈھالنا پڑتا ہے۔

تو آئیے بات کرتے ہیں ریسپانسیو اینیمیشن! وائلڈ وائلڈ ویب پر اینیمیٹ کرنے کے لیے ہم بہترین طریقے سے کیسے پہنچ سکتے ہیں؟ ہم کچھ عمومی طریقوں، کچھ جی ایس اے پی کے لیے مخصوص نکات اور کچھ حرکتی اصولوں کا احاطہ کرنے جا رہے ہیں۔ آئیے کچھ فریمنگ کے ساتھ شروع کریں…

اس اینیمیشن کو کیسے استعمال کیا جائے گا؟

ذمہ دار حرکت پذیری پر زیک سوسیئر کا مضمون کوڈ میں کودنے سے پہلے حتمی نتیجہ کے بارے میں سوچنے کے لیے ایک قدم پیچھے ہٹنے کی تجویز کرتا ہے۔

کیا حرکت پذیری ایک ماڈیول ہوگی جو آپ کی درخواست کے متعدد حصوں میں دہرائی جاتی ہے؟ کیا اسے بالکل پیمانے کی ضرورت ہے؟ اس کو ذہن میں رکھنے سے اس طریقہ کار کا تعین کرنے میں مدد مل سکتی ہے جس میں حرکت پذیری کی پیمائش کی جانی چاہئے اور آپ کو کوششوں کو ضائع کرنے سے روک سکتے ہیں۔

یہ بہت اچھا مشورہ ہے۔ اے بھاری ریسپانسیو اینیمیشن کو ڈیزائن کرنے کا ایک حصہ یہ جاننا ہے کہ آیا اور کس طرح اس اینیمیشن کو پیمانے کی ضرورت ہے، اور پھر شروع سے ہی صحیح طریقہ کا انتخاب کرنا ہے۔

زیادہ تر متحرک تصاویر درج ذیل زمروں میں آتی ہیں:

• فکسڈ: آئیکنز یا لوڈرز جیسی چیزوں کے لیے متحرک تصاویر جو تمام آلات پر یکساں سائز اور پہلو کا تناسب برقرار رکھتی ہیں۔ یہاں فکر کرنے کی کوئی بات نہیں! وہاں کچھ پکسل ویلیو کو ہارڈ کوڈ کریں اور اپنے دن کے ساتھ آگے بڑھیں۔
• سیال: اینیمیشنز جن کو مختلف ڈیوائسز میں بہاؤ کے ساتھ ڈھالنے کی ضرورت ہے۔ زیادہ تر لے آؤٹ اینیمیشن اس زمرے میں آتے ہیں۔
• ھدف شدہ: اینیمیشنز جو کسی مخصوص ڈیوائس یا اسکرین کے سائز کے لیے مخصوص ہیں، یا کسی خاص بریک پوائنٹ پر کافی حد تک تبدیل ہوتی ہیں، جیسے کہ صرف ڈیسک ٹاپ اینیمیشنز یا تعاملات جو آلہ کے مخصوص تعامل پر انحصار کرتے ہیں، جیسے ٹچ یا ہوور۔

فلوڈ اور ٹارگٹڈ اینیمیشنز کو سوچنے کے مختلف طریقوں اور حل کی ضرورت ہوتی ہے۔ آئیے ایک نظر ڈالتے ہیں…

سیال حرکت پذیری۔

As اینڈی گھنٹی کہتے ہیں: براؤزر کے سرپرست بنیں، نہ کہ اس کا مائیکرو مینیجر — براؤزر کو کچھ ٹھوس اصول اور اشارے دیں، پھر اسے ان لوگوں کے لیے صحیح فیصلے کرنے دیں جو اس پر آتے ہیں۔ (یہاں ہیں سلائیڈیں اس پیشکش سے۔)

فلوئڈ اینیمیشن براؤزر کو سخت محنت کرنے دینے کے بارے میں ہے۔ بہت ساری متحرک تصاویر شروع سے ہی صحیح اکائیوں کا استعمال کرکے مختلف سیاق و سباق میں آسانی سے ایڈجسٹ ہوسکتی ہیں۔ اگر آپ اس قلم کا سائز تبدیل کرتے ہیں تو آپ دیکھ سکتے ہیں کہ حرکت پذیری کا استعمال کرتے ہوئے ویو پورٹ یونٹس براؤزر کے ایڈجسٹ ہوتے ہی روانی سے ترازو:

جامنی رنگ کا باکس مختلف بریک پوائنٹس پر بھی چوڑائی کو تبدیل کرتا ہے، لیکن جیسا کہ ہم اسے منتقل کرنے کے لیے فیصد کا استعمال کر رہے ہیں، اس کے ساتھ ساتھ حرکت پذیری کی پیمائش بھی ہوتی ہے۔

متحرک لے آؤٹ خصوصیات جیسے left اور top لے آؤٹ ری فلو اور پریشان کن 'جانکی' اینیمیشن کا سبب بن سکتا ہے، لہذا جہاں ممکن ہو تبدیلیوں اور دھندلاپن پر قائم رہیں۔

اگرچہ ہم صرف ان اکائیوں تک ہی محدود نہیں ہیں — آئیے کچھ دیگر امکانات پر ایک نظر ڈالتے ہیں۔

SVG یونٹس

SVG کے ساتھ کام کرنے کے بارے میں مجھے جو چیزیں پسند ہیں ان میں سے ایک یہ ہے کہ ہم SVG صارف یونٹس کو حرکت پذیری کے لیے استعمال کر سکتے ہیں جو باکس سے باہر جوابدہ ہیں۔ سراغ واقعی نام میں ہے - سکلیبل ویکٹر گرافک۔ SVG زمین میں، تمام عناصر کو مخصوص نقاط پر پلاٹ کیا جاتا ہے۔ ایس وی جی اسپیس گراف پیپر کے لامحدود بٹ کی طرح ہے جہاں ہم عناصر کو ترتیب دے سکتے ہیں۔ دی viewBox گراف پیپر کے طول و عرض کی وضاحت کرتا ہے جسے ہم دیکھ سکتے ہیں۔

viewBox="0 0 100 50”

اس اگلے ڈیمو میں، ہمارا SVG viewBox is 100 یونٹس وسیع اور 50 لمبے یونٹس۔ اس کا مطلب ہے کہ اگر ہم عنصر کو متحرک کرتے ہیں۔ 100 ایکس محور کے ساتھ اکائیاں، یہ ہمیشہ اپنے پیرنٹ SVG کی پوری چوڑائی کے ساتھ حرکت کرے گا، چاہے وہ SVG کتنا ہی بڑا ہو یا چھوٹا! دیکھنے کے لیے ڈیمو کا سائز تبدیل کریں۔

والدین کے کنٹینر کی چوڑائی کی بنیاد پر چائلڈ ایلیمنٹ کو متحرک کرنا HTML-land میں تھوڑا چالاک ہے۔ اب تک، ہمیں جاوا اسکرپٹ کے ساتھ والدین کی چوڑائی کو پکڑنا پڑا ہے، جو آپ کے متحرک ہونے پر کافی آسان ہے۔ from ایک تبدیل شدہ پوزیشن، لیکن جب آپ متحرک ہو رہے ہیں تو تھوڑا سا تیز to کہیں جیسا کہ آپ مندرجہ ذیل ڈیمو میں دیکھ سکتے ہیں۔ اگر آپ کا اختتامی نقطہ تبدیل شدہ پوزیشن ہے اور آپ اسکرین کا سائز تبدیل کرتے ہیں، تو آپ کو دستی طور پر اس پوزیشن کو ایڈجسٹ کرنا پڑے گا۔ گندا… 🤔

اگر آپ سائز تبدیل کرنے پر اقدار کو ایڈجسٹ کرتے ہیں تو یاد رکھیں ڈیباؤنس، یا براؤزر کا سائز تبدیل کرنے کے بعد فنکشن کو فائر کریں۔ سننے والے ہر سیکنڈ میں ایک ٹن ایونٹس کا سائز تبدیل کرتے ہیں، لہذا ہر ایونٹ پر پراپرٹیز کو اپ ڈیٹ کرنا براؤزر کے لیے بہت کام ہے۔

لیکن، یہ حرکت پذیری اسپیڈ بمپ جلد ہی ماضی کی بات ہونے جا رہی ہے! ڈرم رول پلیز… 🥁

تقریباً 15 سال کے بعد ایک انتہائی درخواست کردہ (ناممکن!؟) خصوصیت کے طور پر، سائز پر مبنی کنٹینر کے سوالات اور اکائیاں Chrome/Edge 105 اور Safari 16 دونوں میں بھیج دی گئی ہیں! فائر فاکس زیادہ پیچھے نہیں ہے۔

(یہ بھی: طرز کے سوالات کا ایک پروٹو ٹائپ ہے!)https://t.co/A2zgd9l4FC

— میا (@TerribleMia) ستمبر 15، 2022

کنٹینر یونٹس! خوبصورت چیزیں۔ جس وقت میں یہ لکھ رہا ہوں، وہ صرف کروم اور سفاری میں کام کرتے ہیں — لیکن جب تک آپ اسے پڑھتے ہیں، ہمارے پاس فائر فاکس بھی ہوگا۔ اس اگلے ڈیمو میں انہیں ایکشن میں دیکھیں۔ ان چھوٹے لڑکوں کو دیکھو! کیا یہ دلچسپ نہیں ہے، حرکت پذیری جو والدین کے عناصر سے متعلق ہے!

FLIP کے ساتھ فلوئڈ لے آؤٹ ٹرانزیشن

جیسا کہ ہم نے پہلے ذکر کیا ہے، SVG-land میں ہر عنصر کو صاف ستھرا ایک گرڈ پر رکھا جاتا ہے اور جوابی طور پر گھومنا واقعی آسان ہے۔ ایچ ٹی ایم ایل لینڈ میں یہ بہت زیادہ پیچیدہ ہے۔ جوابی لے آؤٹ بنانے کے لیے، ہم مختلف پوزیشننگ طریقوں اور ترتیب کے نظاموں کا ایک گروپ استعمال کرتے ہیں۔ ویب پر متحرک ہونے کی اہم مشکلات میں سے ایک یہ ہے۔ بہت زیادہ ترتیب میں تبدیلیوں کو متحرک کرنا ناممکن ہے۔ ہوسکتا ہے کہ کسی عنصر کو پوزیشن سے منتقل ہونے کی ضرورت ہو۔ relative کرنے کے لئے fixed، یا فلیکس کنٹینر کے کچھ بچوں کو ویو پورٹ کے ارد گرد آسانی سے شفل کرنے کی ضرورت ہے۔ ہوسکتا ہے کہ کسی عنصر کو دوبارہ والدین بنانے اور DOM میں بالکل نئی پوزیشن پر منتقل کرنے کی ضرورت ہو۔

مشکل، ہہ؟

ٹھیک ہے. دن کو بچانے کے لیے FLIP تکنیک یہاں موجود ہے۔ یہ ہمیں آسانی سے ان ناممکن چیزوں کو متحرک کرنے کی اجازت دیتا ہے۔ بنیادی بنیاد یہ ہے:

• پہلا: منتقلی میں شامل عناصر کی ابتدائی پوزیشن حاصل کریں۔
• آخری: عناصر کو منتقل کریں اور حتمی پوزیشن پر قبضہ کریں۔
• الٹائیں: پہلی اور آخری حالت کے درمیان تبدیلیوں پر کام کریں اور عناصر کو ان کی اصل پوزیشن پر واپس لانے کے لیے تبدیلیوں کا اطلاق کریں۔ اس سے ایسا لگتا ہے جیسے عناصر ابھی بھی موجود ہیں۔ سب سے پہلے پوزیشن لیکن وہ اصل میں نہیں ہیں.
• کھیلیں: الٹی تبدیلیوں کو ہٹا دیں اور ان میں متحرک کریں۔ جعلی سب سے پہلے کو ریاست آخری ریاست.

یہاں GSAP کے FLIP پلگ ان کا استعمال کرتے ہوئے ایک ڈیمو ہے جو آپ کے لیے تمام بھاری لفٹنگ کرتا ہے!

اگر آپ ونیلا کے نفاذ کے بارے میں کچھ اور سمجھنا چاہتے ہیں تو پال لیوس کی طرف جائیں۔ بلاگ پوسٹ - وہ FLIP تکنیک کے پیچھے دماغ ہے۔

روانی سے SVG اسکیل کرنا

تم نے مجھے سمجھ لیا… یہ نہیں ہے۔ واقعی ایک حرکت پذیری ٹپ. لیکن اسٹیج کو صحیح طریقے سے ترتیب دینا اچھی اینیمیشن کے لیے ضروری ہے! SVG بطور ڈیفالٹ بہت اچھی طرح سے پیمانہ بناتا ہے، لیکن ہم کنٹرول کر سکتے ہیں کہ یہ کس طرح مزید پیمانہ بناتا ہے۔ preserveAspectRatio، جو میگا آسان ہے جب SVG عنصر کا پہلو تناسب اور viewBox پہلو تناسب مختلف ہیں. یہ اسی طرح سے بہت زیادہ کام کرتا ہے۔ background-position اور background-size سی ایس ایس میں خصوصیات۔ اعلامیہ ایک صف بندی کی قدر سے بنا ہے (background-position) اور ایک سے ملو or سلائس حوالہ (background-size).

جہاں تک ان میٹ اور سلائس حوالہ جات کا تعلق ہے۔ slice کی طرح ہے background size: cover، اور meet کی طرح ہے background-size: contain.

• preserveAspectRatio="MidYMax slice" — x-axis کے وسط میں، y-axis کے نچلے حصے میں سیدھ کریں، اور پورے ویو پورٹ کو ڈھانپنے کے لیے اسکیل کریں۔
• preserveAspectRatio="MinYMin meet" - x-axis کے بائیں طرف، y-axis کے اوپری حصے کو سیدھ میں لائیں، اور پورے کو برقرار رکھتے ہوئے اسکیل کریں viewBox مرئی

ٹام ملر استعمال کرتے ہوئے اسے ایک قدم آگے لے جاتا ہے۔ overflow: visible CSS میں اور اونچائی کو محدود رکھتے ہوئے "اسٹیج لیفٹ" اور "اسٹیج رائٹ" کو ظاہر کرنے کے لیے ایک پر مشتمل عنصر:

ریسپانسیو SVG اینیمیشنز کے لیے، SVG ویو باکس کا استعمال ایک ایسا منظر بنانے کے لیے آسان ہو سکتا ہے جو ایک مخصوص براؤزر کی چوڑائی کے نیچے ترازو اور ترازو بناتا ہے، جب کہ براؤزر اس سے زیادہ وسیع ہونے پر SVG اینیمیشن کو دائیں اور بائیں بھی ظاہر کرتا ہے۔ دہلیز ہم SVG پر نظر آنے والے اوور فلو کو شامل کرکے اور اسے a کے ساتھ مل کر حاصل کر سکتے ہیں۔ max-height SVG کو عمودی طور پر بہت زیادہ اسکیلنگ سے روکنے کے لیے ریپر۔

کینوس کو روانی سے پیمائی کرنا

کینوس پیچیدہ متحرک تصاویر کے ساتھ بہت زیادہ پرفارمنس ہے۔ لاٹوں SVG یا HTML DOM کو متحرک کرنے کے بجائے حرکت پذیر حصوں کا، لیکن یہ فطری طور پر زیادہ پیچیدہ بھی ہے۔ آپ کو ان کارکردگی کے فوائد کے لئے کام کرنا ہوگا! SVG کے برعکس جس میں خوبصورت ریسپانسیو یونٹس ہیں اور باکس سے باہر اسکیلنگ، ارد گرد مالک ہونا اور تھوڑا سا مائیکرو مینیج کرنا پڑتا ہے۔

مجھے اپنا سیٹ اپ کرنا پسند ہے۔ تاکہ یہ ایس وی جی (میں متعصب ہو سکتا ہوں) کی طرح کام کرتا ہے جس کے اندر کام کرنے کے لیے ایک خوبصورت یونٹ سسٹم اور ایک مقررہ پہلو تناسب کے ساتھ۔ ہر بار جب کچھ تبدیل ہوتا ہے تو اسے دوبارہ کھینچنے کی بھی ضرورت ہوتی ہے، لہذا یاد رکھیں کہ براؤزر کا سائز تبدیل کرنے تک دوبارہ ڈرا کرنے میں تاخیر کریں، یا ڈیباؤنس کریں!

جارج فرانسس یہ بھی ایک ساتھ رکھو خوبصورت چھوٹی لائبریری جو آپ کو کینوس کی وضاحت کرنے کی اجازت دیتا ہے۔ viewBox وصف اور preserveAspectRatio — بالکل SVG کی طرح!

ٹارگٹڈ اینیمیشن

آپ کو کبھی کبھی اپنی اینیمیشن کے لیے کم سیال اور زیادہ ہدایت والا طریقہ اختیار کرنے کی ضرورت پڑ سکتی ہے۔ موبائل آلات میں بہت کم رئیل اسٹیٹ ہے، اور ڈیسک ٹاپ مشین کے مقابلے میں کم اینیمیشن رس کارکردگی کے لحاظ سے۔ لہذا موبائل صارفین کو کم اینیمیشن پیش کرنا سمجھ میں آتا ہے، ممکنہ طور پر کوئی اینیمیشن بھی نہیں:

کبھی کبھی موبائل کے لیے بہترین ریسپانسیو اینیمیشن بالکل بھی اینیمیشن نہیں ہوتی! موبائل UX کے لیے، اینیمیشن کے ختم ہونے کا انتظار کرنے کے مقابلے میں صارف کو فوری مواد استعمال کرنے کی ترجیح دیں۔ موبائل اینیمیشنز کو مواد، نیویگیشن، اور تعاملات میں تاخیر کرنے کی بجائے اضافہ کرنا چاہیے۔ ایرک وین ہولٹز

ایسا کرنے کے لیے، ہم مخصوص ویو پورٹ سائز کو نشانہ بنانے کے لیے میڈیا کے سوالات کا استعمال کر سکتے ہیں جیسا کہ ہم CSS کے ساتھ اسٹائل کرتے وقت کرتے ہیں! یہاں ایک سادہ ڈیمو ہے جس میں دکھایا گیا ہے کہ میڈیا کے سوالات کا استعمال کرتے ہوئے ایک CSS اینیمیشن کو ہینڈل کیا جا رہا ہے اور GSAP اینیمیشن کو اس کے ساتھ ہینڈل کیا جا رہا ہے۔ gsap.matchMedia():

اس ڈیمو کی سادگی جادو کا ایک گروپ چھپا رہی ہے! JavaScript اینیمیشنز کو صرف ایک مخصوص اسکرین سائز پر درست طریقے سے کام کرنے کے لیے کچھ زیادہ سیٹ اپ اور کلین اپ کی ضرورت ہوتی ہے۔ میں نے ماضی میں ایسی ہولناکیاں دیکھی ہیں جہاں لوگوں نے اینیمیشن کو صرف CSS میں دیکھنے سے چھپا دیا ہے۔ opacity: 0، لیکن اینیمیشن وسائل کو استعمال کرتے ہوئے پس منظر میں اب بھی دور ہو رہی ہے۔ 😱

اگر اسکرین کا سائز مزید مماثل نہیں ہوتا ہے تو، اینیمیشن کو ختم کرنے اور ردی کی ٹوکری کو جمع کرنے کے لیے جاری کرنے کی ضرورت ہے، اور اینیمیشن سے متاثر ہونے والے عناصر کو دیگر اسٹائل کے ساتھ تنازعات کو روکنے کے لیے کسی بھی موشن متعارف کرائے گئے ان لائن اسٹائلز سے صاف کرنے کی ضرورت ہے۔ تک gsap.matchMedia()، یہ ایک فضول عمل تھا۔ ہمیں ہر اینیمیشن کا ٹریک رکھنا تھا اور اس سب کو دستی طور پر منظم کرنا تھا۔

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)

اس کے بعد میں اپنے CSS لے آؤٹ کے سوالات اور جاوا اسکرپٹ کے سوالات سے شادی کروں گا لہذا میں ان پٹ ڈیوائس کو بنیادی عنصر کے طور پر غور کر رہا ہوں کی حمایت کی چوڑائی کے لحاظ سے، بجائے اس کے برعکس۔

اسکرول ٹریگر ٹپس

اگر آپ GSAP استعمال کر رہے ہیں۔ 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 آپ کے لیے اس قدر کا دوبارہ حساب لگائے گا۔

بونس GSAP بیوقوف ٹپ!

موبائل آلات پر، براؤزر کا ایڈریس بار عام طور پر ظاہر ہوتا ہے اور آپ کے سکرول کرتے وقت چھپ جاتا ہے۔ یہ ایک ری سائز ایونٹ کے طور پر شمار ہوتا ہے اور اس سے فائر ہو جائے گا۔ ScrollTrigger.refresh(). یہ مثالی نہیں ہوسکتا ہے کیونکہ یہ آپ کی حرکت پذیری میں چھلانگ کا سبب بن سکتا ہے۔ GSAP 3.10 شامل کیا گیا۔ ignoreMobileResize. یہ براؤزر بار کے برتاؤ پر اثر انداز نہیں ہوتا، لیکن یہ روکتا ہے۔ ScrollTrigger.refresh() کے لئے فائرنگ سے صرف ٹچ ڈیوائسز پر چھوٹے عمودی سائز تبدیل کیے جاتے ہیں۔

ScrollTrigger.config({
  ignoreMobileResize: true
});

تحریک کے اصول

میں نے سوچا کہ میں آپ کو ویب پر حرکت کے ساتھ کام کرتے وقت غور کرنے کے لیے کچھ بہترین طریقوں کے ساتھ چھوڑ دوں گا۔

فاصلہ اور آسانی

ایک چھوٹی لیکن اہم چیز جسے ریسپانسیو اینیمیشن کے ساتھ بھول جانا آسان ہے وہ ہے رفتار، رفتار اور فاصلے کے درمیان تعلق! اچھی اینیمیشن حقیقی دنیا کی نقل کرنی چاہیے۔ قابل اعتماد محسوس کرنا، اور حقیقی دنیا میں ایک بڑا فاصلہ طے کرنے میں زیادہ وقت لگتا ہے۔ آپ کی اینیمیشن جس فاصلے پر سفر کر رہی ہے اس پر دھیان دیں، اور اس بات کو یقینی بنائیں کہ استعمال شدہ دورانیہ اور نرمی دیگر اینیمیشنز کے تناظر میں معنی رکھتی ہے۔

آپ اکثر عناصر پر مزید ڈرامائی نرمی کا اطلاق بھی کر سکتے ہیں اور بڑھتی ہوئی رفتار کو ظاہر کرنے کے لیے مزید سفر کر سکتے ہیں:

استعمال کے بعض معاملات کے لیے اسکرین کی چوڑائی کی بنیاد پر دورانیے کو زیادہ متحرک طور پر ایڈجسٹ کرنا مددگار ثابت ہو سکتا ہے۔ اس اگلے ڈیمو میں ہم استعمال کر رہے ہیں۔ gsap.utils اس قدر کو بند کرنے کے لیے جو ہم کرنٹ سے واپس حاصل کرتے ہیں۔ window.innerWidth ایک مناسب رینج میں، پھر ہم اس نمبر کو ایک مدت تک میپ کر رہے ہیں۔

وقفہ کاری اور مقدار

ذہن میں رکھنے کے لئے ایک اور چیز مختلف اسکرین سائز میں عناصر کی وقفہ کاری اور مقدار ہے۔ حوالہ دینا اسٹیون شا۔:

اگر آپ کے پاس کسی قسم کی ماحولیاتی اینیمیشن (پیرامیلکس، بادل، درخت، کنفیٹی، سجاوٹ، وغیرہ) ہے جو کھڑکی کے ارد گرد رکھی ہوئی ہیں، تو یقینی بنائیں کہ وہ اسکرین کے سائز کے لحاظ سے مقدار کو پیمانہ اور/یا ایڈجسٹ کریں۔ بڑی اسکرینوں کو ممکنہ طور پر زیادہ سے زیادہ عناصر کی ضرورت ہوتی ہے، جبکہ چھوٹی اسکرینوں کو ایک ہی اثر کے لیے صرف چند کی ضرورت ہوتی ہے۔

میں کس طرح سے محبت کرتا ہوں اوپر وشنیا ایک اسٹیج کے طور پر حرکت پذیری کے بارے میں سوچتا ہے۔ عناصر کو شامل کرنا اور ہٹانا صرف ایک رسمی کام نہیں ہے، یہ مجموعی کوریوگرافی کا حصہ ہوسکتا ہے۔

ریسپانسیو اینیمیشنز کو ڈیزائن کرتے وقت، چیلنج یہ نہیں ہے کہ ویو پورٹ میں ایک ہی مواد کو کس طرح کچل دیا جائے تاکہ یہ "فٹ" ہو، بلکہ یہ ہے کہ موجودہ مواد کے سیٹ کو کس طرح درست کیا جائے تاکہ یہ ایک ہی ارادے کا اظہار کرے۔ اس کا مطلب یہ ہے کہ شعوری طور پر انتخاب کرنا ہے کہ کون سا مواد شامل کرنا ہے اور کون سا ہٹانا ہے۔ عام طور پر حرکت پذیری کی دنیا میں چیزیں صرف فریم کے اندر یا باہر نہیں آتی ہیں۔ عناصر کو "مرحلے" میں داخل ہونے یا باہر نکلنے کے بارے میں سوچنا سمجھ میں آتا ہے، اس منتقلی کو اس طرح متحرک کرنا جو بصری اور موضوعاتی معنی رکھتا ہے۔

اور یہی بہت ہے۔ اگر آپ کے پاس کوئی اور جوابی اینیمیشن ٹپس ہیں، تو انہیں تبصرے کے سیکشن میں پاپ کریں۔ اگر کوئی بہت مددگار چیز ہے، تو میں انہیں معلومات کے اس مجموعہ میں شامل کروں گا!

ضمیمہ

کی طرف سے ایک اور نوٹ ٹام ملر جیسا کہ میں اس مضمون کو تیار کر رہا تھا:

آپ کے ریسپانسیو اینیمیشن آرٹیکل کے لیے اس ٹپ کے ساتھ میں شاید بہت دیر کر چکا ہوں، لیکن میں بہت زیادہ تجویز کرتا ہوں کہ "تمام اینیمیشنز کو بنانے سے پہلے حتمی شکل دیں"۔ میں فی الحال "موبائل ورژن" کے ساتھ کچھ سائٹ اینیمیشنز کو دوبارہ تیار کر رہا ہوں۔ کے لیے اللہ کا شکر ہے۔ gsap.matchMedia… لیکن مجھے یقین ہے کہ کاش ہمیں معلوم ہوتا کہ شروع سے ہی الگ الگ موبائل لے آؤٹ/اینیمیشن ہوں گے۔

مجھے لگتا ہے کہ ہم سب اس کی تعریف کرتے ہیں کہ "آگے کی منصوبہ بندی" کرنے کا یہ اشارہ قطعی آخری لمحے میں آیا۔ شکریہ، ٹام، اور ان retrofits کے ساتھ نیک خواہشات۔