പ്രൊഡക്ഷനിൽ Motion: ലേഔട്ട് ആനിമേഷനുകളും ആക്സസിബിൾ പാറ്റേണുകളും
Framer-motion മാറിയിരിക്കുന്നു. 2024 അവസാനത്തോടെ, ഈ പാക്കേജിന്റെ പേര് Motion എന്നായി മാറി. നിങ്ങൾ motion/react എന്ന ഇംപോർട്ട് പാത്ത് (import path) ഉപയോഗിക്കണം.
മിക്ക ട്യൂട്ടോറിയലുകളും കാലഹരണപ്പെട്ടവയാണ്. അവ ഇപ്പോഴും പഴയ ഇംപോർട്ടുകൾ കാണിക്കുന്നു കൂടാതെ ആക്സസിബിലിറ്റി (accessibility) കുറവാണ്. യഥാർത്ഥ പ്രോജക്റ്റുകളിൽ ആധുനിക Motion ഉപയോഗിക്കാൻ ഈ ഗൈഡ് നിങ്ങളെ സഹായിക്കുന്നു.
അപ്ഗ്രേഡ്
ഈ മാറ്റം വളരെ ലളിതമാണ്. നിങ്ങൾ പതിപ്പ് (version) 11 ആണ് ഉപയോഗിക്കുന്നതെങ്കിൽ, പതിപ്പ് 12-ലേക്ക് മാറുന്നത് ഒരു 'find-and-replace' ടാസ്ക് മാത്രമാണ്.
- അൺഇൻസ്റ്റാൾ ചെയ്യുക:
npm uninstall framer-motion - ഇൻസ്റ്റാൾ ചെയ്യുക:
npm install motion - ഇംപോർട്ടുകൾ അപ്ഡേറ്റ് ചെയ്യുക: 'framer-motion' എന്നത് 'motion/react' എന്ന് മാറ്റുക
മൈഗ്രേഷൻ സമയത്ത് നിങ്ങൾക്ക് രണ്ട് പാക്കേജുകളും ഒരേസമയം പ്രവർത്തിപ്പിക്കാം. എന്നാൽ അവ എന്നെന്നേക്കുമായി നിങ്ങളുടെ കോഡ്ബേസിൽ (codebase) നിലനിർത്തരുത്.
ലേഔട്ട് ആനിമേഷനുകൾ
ഒരു എലമെന്റിന്റെ വലുപ്പവും സ്ഥാനവും നിരീക്ഷിക്കാൻ layout പ്രോപ്പ് Motion-നോട് ആവശ്യപ്പെടുന്നു. ബ്രൗസർ പെട്ടെന്ന് പുതിയ സ്ഥാനങ്ങളിലേക്ക് മാറുന്നതിന് പകരം, ആ മാറ്റങ്ങളെ ഇത് ആനിമേഷനിലൂടെ കാണിക്കുന്നു.
ലിസ്റ്റുകൾക്കായി layout="position" ഉപയോഗിക്കുക. ഒരു ഐറ്റം വലുതാകുമ്പോൾ ഇത് മറ്റ് ഐറ്റങ്ങളെ (siblings) നീക്കുന്നുണ്ടെങ്കിലും ഉള്ളിലെ കണ്ടന്റ് അമർത്താറില്ല.
മൗണ്ടിംഗിനും (mounting) അൺമൗണ്ടിംഗിനും (unmounting) AnimatePresence ഉപയോഗിക്കുക. ഇത് ഇല്ലാതെയാണെങ്കിൽ, ആനിമേഷൻ പൂർത്തിയാകുന്നതിന് മുമ്പ് തന്നെ React എലമെന്റുകളെ DOM-ൽ നിന്ന് നീക്കം ചെയ്യും.
height: auto ആനിമേഷൻ ചെയ്യുന്നത് ഒഴിവാക്കുക. ഇത് വിഷ്വൽ ഗ്ലിച്ചുകൾക്ക് (visual glitches) കാരണമാകും. പകരം, സുഗമമായ ഹൈറ്റ് മാറ്റങ്ങൾക്കായി ഒരു CSS grid wrapper (0fr to 1fr) ഉപയോഗിക്കുക.
ആക്സസിബിലിറ്റി
ഏകദേശം 30% iOS ഉപയോക്താക്കളും prefers-reduced-motion ഓപ്ഷൻ ഉപയോഗിക്കുന്നുണ്ട്. എല്ലാ ആനിമേഷനുകളും വെറുതെ ഓഫ് ചെയ്യരുത്. ഇത് നിങ്ങളുടെ ലേഔട്ടിനെ തകരാറിലാക്കും.
തെറ്റായ രീതി: ഉപയോക്താവിന് കുറഞ്ഞ ആനിമേഷൻ വേണമെന്നുണ്ടെങ്കിൽ <motion.div> എന്നതിന് പകരം ഒരു സാധാരണ <div> ഉപയോഗിക്കുക. ഇത് ലേഔട്ട് പെട്ടെന്ന് മാറുന്നതിനും (snap) തകരാറിലായതുപോലെ തോന്നുന്നതിനും കാരണമാകും.
ശരിയായ രീതി: കമ്പോണന്റിന് പകരം ട്രാൻസിഷനെ (transition) നിയന്ത്രിക്കുക. <motion.div> നിലനിർത്തുക, എന്നാൽ അതിന്റെ ഡ്യൂറേഷൻ (duration) 0 ആയി സെറ്റ് ചെയ്യുക.
ഇത് നിയന്ത്രിക്കാൻ ഒരു കസ്റ്റം ഹുക്ക് (custom hook) നിർമ്മിക്കുക:
useReducedMotionഹുക്ക് ഉപയോഗിക്കുക.trueആണെങ്കിൽ, ഡ്യൂറേഷൻ 0 ആയി നൽകുക.falseആണെങ്കിൽ, നിങ്ങളുടെ സാധാരണ സ്പ്രിംഗ് സെറ്റിംഗുകൾ (spring settings) നൽകുക.
ഇത് ആനിമേഷൻ ഇല്ലാതെ തന്നെ എലമെന്റുകൾ അവയുടെ ശരിയായ സ്ഥാനങ്ങളിൽ എത്തുന്നുവെന്ന് ഉറപ്പാക്കുന്നു.
എപ്പോൾ Motion ഉപയോഗിക്കണം
ലളിതമായ ഫേഡുകൾക്കായി (fades) ബ്രൗസറിലെ Web Animations API ഉപയോഗിക്കുക. ഇതിന് മറ്റ് ഡിപെൻഡൻസികൾ (dependencies) ആവശ്യമില്ല.
താഴെ പറയുന്ന സാഹചര്യങ്ങളിൽ Motion ഉപയോഗിക്കുക:
- കമ്പോണന്റ് ലൈഫ് സൈക്കിളുകൾ (component lifecycles) മനസ്സിലാക്കുന്ന React-native APIs ആവശ്യമായി വരുമ്പോൾ.
- DOM മാറ്റങ്ങൾ ട്രാക്ക് ചെയ്യുന്ന ലേഔട്ട് ആനിമേഷനുകൾക്ക്.
- എക്സിറ്റ് ആനിമേഷനുകൾക്കായി (exit animations)
AnimatePresenceആവശ്യമായി വരുമ്പോൾ. - സ്വാഭാവികമായി തോന്നുന്ന സ്പ്രിംഗ് ഫിസിക്സ് (spring physics) ആവശ്യമായി വരുമ്പോൾ.