Now that 2023 is here, all of us at Compass wish you a year that's good for everyone ✨
Alright, let's get into today's topic
Sometimes, as a Front-end Developer, you might need to build Modern Websites depending on the Audience (or) the Client. When that happens, you need to know how a Modern Website works and what goes into one. Generally speaking, a Modern Website takes the familiar Static Page look and adds UI that keeps the Audience more Focused, motion and Animations that make the UX more noticeable (Eg. Fade in, Fade out, Left Slider, Right Slider), things like Virtual 3D Animation (ThreeJS), and Scroll Animations that change the UI every time you scroll.
To build Modern Websites like that, you need solid JavaScript basics, and if you want to build them with Frameworks, you need a grip on the Framework Basic Concepts too. Today I'll walk you through (7) Animation JS libraries that can turn Static Websites into Modern Websites. One thing, though: don't get so eager to be a Modern Website that you pile on Animation you don't need. Why? Every Website has an Accent, and when you add Animation that doesn't fit that Accent, you often can't deliver the UX Accent you want to give your Audience.
As the saying goes, "too much medicine becomes poison." So I'd encourage you to use Animation Libraries in moderation, too.
mo.js
Lottie Docs
three.js
GSAP
Locomotive Scroll
Popmotion
vivus
See you all in the next one 🧐
2023 ကိုရောက်လာပြီဆိုတော့အားလုံးအတွက်အကျိုးရှိစေမဲ့နှစ်ဖြစ်ကြပါစေလို့ Compass ကနေဆုမွန်ကောင်းတောင်းလိုက်ပါတယ် ✨
ကဲ ဒီနေ့ပြောပြမယ့်အရာလေးကိုဆက်လိုက်ရအောင်
တခါတလေ Front-end Developer အနေနဲ့ Audience (ဒါမှမဟုတ်) Client အခြေအနေအရ Modern Website တွေကိုဖန်တီးရနိုင်ပါတယ်။ အဲဒီအခါ Modern Website ဆိုတာဘယ်လိုအလုပ်လုပ်လဲ၊ ဘာတွေပါလဲဆိုတာ သိထားဖို့လိုအပ်ပါတယ်။ Modern Website ဆိုတာ အတော်များများရင်းနှီးပြီးသား Static Page အသွင်အပြင်တွေကို Audience ရဲ့အမြင်ကို ပိုပြီး Focused ဖြစ်စေမဲ့ UI အသွင်အပြင်တွေ၊ UXအမြင်ကို ပိုသိသာစေဖို့အလှုပ်အရွ Animation တွေ (Eg. Fade in, Fade out, Left Slider, Right Slider), Virtual 3D Animation လိုမျိုးတွေ (ThreeJS ) စတာတွေနဲ့ Scroll ဆွဲတိုင်းမှာ မတူညီတဲ့ UI အသွင်အပြင်ပြောင်းလဲစေတဲ့ Scroll Animation တွေထည့်ထားတဲ့ Website တွေကိုယေဘုယျအားဖြင့်ဆိုလို့ရပါတယ်။
အဲ့လို Modern Website တွေပြုလုပ်ဖို့ဆိုရင် JavaScript အခြေခံခိုင်မြဲဖို့လိုအပ်သလို Framework တွေနဲ့ ပြုလုပ်ချင်လဲ Framework Basic Concept တွေကို အခြေခံပိုင်ဆိုင်ထားဖို့လိုအပ်ပါတယ် ဒီနေ့မှာတော့ Static Website တွေကို Modern Website တွေအဖြစ်ပြုလုပ်စေနိုင်မဲ့ Animation JS library (7) ခုကိုပြောပြမှာဖြစ်ပါတယ်။ ဒီနေရာမှာတစ်ခုရှိတာက Modern Website ဖြစ်ချင်စိတ်များပြီး မလိုအပ်ဘဲ Animation အလွန်အကျူးမထည့်စေမိဖို့လိုအပ်ပါတယ်။ ဘာဖြစ်လို့လဲဆိုတော့ Website တိုင်းမှာ Accent ဆိုတာရှိပါတယ် Accent နဲ့မကိုက်ညီတဲ့ Animation ထည့်လိုက်တဲ့အခါ Audience ကို ကိုယ်ပေးချင်တဲ့ UX Accent ကိုကောင်းကောင်းမပေးနိုင်ဖြစ်တတ်ပါတယ်
"တန်ဆေးလွန်ဘေး" ဆိုသလိုပေါ့။ ဒါကြောင့် Animation Library တွေကို အတင့်အသင့်အသုံးချတတ်စေဖို့လည်းတိုက်တွန်းလိုက်ပါတယ်
mo.js
Lottie Docs
three.js
GSAP
Locomotive Scroll
Popmotion
vivus
အားလုံး နောက်တစ်ပုဒ်နဲ့မှပြန်တွေ့ကြတာပေါ့ 🧐
Written by