╔════════════════════════════════════════════╗
🌟 ETHIOCODE • PHASE 3 • L05 🌟✨🎬
╚════════════════════════════════════════════╝
📋 FRAMER MOTION 📋
በ React ውስጥ አኒሜሽኖችን በቀላሉ እና እጅግ በሚያምር ሁኔታ ለመስራት ምርጡ መሣሪያ!
ወገኖች ሰላም ነው? 😎🎥
እስካሁን በ CSS @keyframes ብዙ እየጻፋችሁ ትደክሙ ነበር?
Exit animation፣ Stagger፣ Spring physics፣ ወይስ እንደ hover, tap, drag ያሉ የ Gesture አኒሜሽኖች? እያንዳንዱን ነገር በእጅ ለማስተካከልስ ስንት ሰዓት አሳልፋችኋል? 😩
🛑 አቁሙ! አሁን ሁሉም ነገር ቀላል ሆኗል!
══════════════════════════════════════════════
✨ መፍትሄው = Framer Motion
በቃ! motion.divን ብቻ በመጠቀም ሁሉንም አኒሜሽኖች በቀላሉ መቆጣጠር ትችላላችሁ!
╔════════════════════════════════════════════╗
import { motion, AnimatePresence } from "framer-motion";
╚════════════════════════════════════════════╝
ይህ በ React ውስጥ እጅግ ተወዳጅና ለስራ ዝግጁ የሆነ (production-ready) የ animation library ነው!
🚀 ዋና ዋና ጥቅሞቹ፦
⚡ በጣም ፈጣንና ቀላል፦ በትንሽ ኮድ በአጭር ጊዜ ውስጥ ድንቅ ስራዎችን መስራት።
🌿 Spring Physics፦ ተፈጥሯዊና ሳቢ የሆኑ እንቅስቃሴዎች።
🎭 Variants + Stagger፦ ለሊስቶች (lists) የሚሆኑ የተዋቡ አኒሜሽኖች።
🚪 AnimatePresence፦ ዕቃዎች ሲገቡና ሲወጡ የሚታዩ (Enter & Exit) አኒሜሽኖች።
👆 Gestures፦ እንደ whileHover፣ whileTap እና drag ያሉ መስተጋብሮች።
🔄 Layout animations እና ማራኪ የገጽ ሽግግሮች (page transitions)።
══════════════════════════════════════════════
🎯 በዚህ ትምህርት ምን ታገኛላችሁ?
• Framer Motion ምንድን ነው? ከባህላዊ የ CSS አኒሜሽን ጋር ማነጻጸር
• ዋናዎቹን Props (initial, animate, exit, transition) በቀጥታ በተግባር ማየት
• Variants & Stagger — ለሊስቶች ተስማሚ የሆኑ አኒሜሽኖች
• AnimatePresence — Modal, Notification, እና List delete አኒሜሽኖች
• Gestures (Hover, Tap, Drag) + የመለማመጃ ቦታ (Playground)
• ሙሉ ምሳሌ፦ Product Card List + Page Transition + Quiz 🎮
🔥 ትምህርቱን አሁኑኑ በነፃ ጀምሩ! Interactive Playground እና Quiz አብሮት አለው፦
🔗 https://ethiocodesoftselectp3l5.netlify.app
📱 በስልክ ከገባችሁ "Desktop Site" ማብራት እንዳትረሱ!
══════════════════════════════════════════════
◀️👈 PREV: React Hook Form P3·L04 | ▶️➡️ NEXT: Coming Soon!
@EthioCodeSoftSelect
ይህንን በመማር ድረ-ገጾቻችሁን ይበልጥ ውብ፣ ማራኪ እና ፕሮፌሽናል ማድረግ ትችላላችሁ! 💪🎨
ለጓደኛችሁ developer share ማድረጋችሁን እንዳትረሱ! 🚀✨