जितना आप सोचते हैं, उससे भी छोटा रखें
- एक single transition 0.15~0.4 सेकंड
- जब तक यह बहुत तेज़ न लगे, तब तक इसे तेज़ करें, फिर थोड़ा-थोड़ा कम करें
action को curve के अनुसार मिलाएँ
- movement रंग जितना ही subjective है, लेकिन उतना ही महत्वपूर्ण भी है
- वास्तविक दुनिया की movement के बारे में सोचें और उससे तुलना करें
acceleration और deceleration
- अगर animation अप्राकृतिक लगता है, तो अक्सर वजह यह होती है कि वह अचानक शुरू या खत्म हो रहा है
- भले ही बहुत हल्का हो, cubic-bezier curve में easing-in/out जोड़ना बेहतर है
- इसे वास्तविक जैसा दिखाने के लिए "inertia" भी अच्छा है
कम हो तो बेहतर है
- animation के दौरान element जितनी अधिक चीज़ें बदलता है, उतना ही उसके ज़रूरत से ज़्यादा लगने का जोखिम बढ़ता है
- अगर opacity 0 से 1 पर जा रही है, तो 1 की जगह 0.4 आज़माएँ। अगर size बदल रहे हैं, तो थोड़ा छोटे size से शुरू करें
- ज़्यादातर मामलों में अपनी जगह पर आने वाली animation को 5~40 pixels के बीच move करना चाहिए
browser defaults से बचें
- browser में linear, ease, ease-in, ease-out, ease-in-out जैसी curves built-in होती हैं
- वे सुविधाजनक हैं और कुछ स्थितियों में उपयोगी भी, लेकिन बहुत सामान्य होने के कारण सब कुछ एक जैसा दिखने लगता है (जैसे Bootstrap/Tailwind से बनी साइटें अक्सर एक जैसी लगती हैं)
- VS Code में cubic-bezier curve के autocomplete values को आज़माएँ
- या browser developer tools खोलकर curve editor का उपयोग करें
कई properties, कई easing
- यह हमेशा उपयोगी नहीं होता, लेकिन जब कई properties को एक साथ बदलना हो (जैसे transform और opacity)
- कभी-कभी एक ही cubic-bezier curve ठीक लग सकती है, लेकिन वास्तव में हमेशा ऐसा नहीं होता
- जो curve transform पर अच्छी चलती है, वह fade पर उतनी अच्छी न लगे
- ऐसे में CSS property के अनुसार अलग easing चुनना बेहतर है
- property के अनुसार @keyframes animations अलग करें, या कई transitions चुनें
- opacity के लिए linear, transform के लिए cubic-bezier(.5, 0, .5, 1)
staggered delay का उपयोग करें
- कई elements को transition करते समय animation-delay या transition-delay के प्रभाव को कम मत आँकिए
In बाहर जाता है, Out अंदर आता है
- easing curves तीन प्रकार की होती हैं
- ease in (धीरे शुरू होता है)
- ease out (धीरे खत्म होता है)
- in-out (बीच में तेज़, शुरुआत और अंत में धीमा)
- transitions की मुश्किल बात यह है कि कई बार आप in को ease-out और out को ease-in करना चाहते हैं
- एक बाहर जाने और एक अंदर आने वाली animation उपयोगकर्ता की नज़र में एक ही transition लगती है, लेकिन अंदर से वह दो transitions होती हैं
- बाहर जाने वाली चीज़ को धीरे करना है, इसलिए ease-in चाहिए, और अंदर आने वाली चीज़ के लिए ease-out होना चाहिए
hardware acceleration पर निर्भर रहें
- हर CSS property हर device और browser पर smoothly काम नहीं करती
- वे properties जो हमेशा hardware acceleration पा सकती हैं
- transform (सभी translate, scale, rotate और 3D versions सहित)
- opacity
- वे properties जो कुछ मामलों में hardware acceleration पा सकती हैं
- कुछ SVG properties
- filter (browser और filter पर निर्भर)
- canvas और WebGL भी hardware accelerated होते हैं, लेकिन यहाँ उनकी चर्चा नहीं है
- यानी move, resize, या rotate करने के लिए हमेशा CSS
tranform property का उपयोग करें
- कुछ भी करें, element के size या position को सीधे मत बदलें
- height, width, border, margin, padding जैसी layout को प्रभावित करने वाली properties को सीधे बदलने से page performance noticeably धीमी पड़ सकती है
ज़रूरत पड़ने पर will-change का उपयोग करें
- सिद्धांततः animation smooth और performant होना चाहिए, लेकिन अगर वह अप्राकृतिक लगे, तो will-change property का उपयोग करें
- इससे browser को पहले से पता चल जाता है कि क्या बदलेगा, इसलिए वह कुछ अन्य calculations छोड़ सकता है
बोनस : उपयोगकर्ता की preferences का सम्मान करें
- उपयोगकर्ता device settings में "reduced motion" पसंद करने की सेटिंग चुन सकते हैं
- media query या JavaScript के ज़रिए इस value को पहचानकर उसके अनुसार प्रतिक्रिया दी जा सकती है
अभी कोई टिप्पणी नहीं है.