In this video we’re going to look at a web development trend called Motion UI. Adding animation and motion to your site can be very cool and could add to the user experience. But we do have to be careful not to overdo it. When building your UI you always want to also consider the UX, the user experience. Too many animations can cause your site to become sluggish and unresponsive.

There are many Motion UI and Animation libraries out there. There’s Animate.css, Velocity.js, popmotion, GSAP, three.js, Anime.js, and many others. You’ll have to find the one that fits your specific needs.

Today we are going to look at a couple of different ways to add animation to your site. First we are going to use plain JavaScript, without any libraries to animate some text on scroll.

Then we will use Anime.js to create some animations on load.

And lastly we will use JavaScript’s IntersectionObserver in combination with Anime.js to have content animate into view while we are scrolling.

———————————————————–
Code from this video:
https://github.com/codeSTACKr/Motion-UI
———————————————————–

Check out @JavaScript Mastery for React and other great videos!
https://www.youtube.com/javascriptmastery
_____________________________________

📚 Learn to CODE in just a FEW months here:
Treehouse Discount Code: https://treehouse.7eer.net/codeSTACKr
_____________________________________

🛠️ Tools I use:
🟠 Theme: https://marketplace.visualstudio.com/items?itemName=codestackr.codestackr-theme
🟠 Font: STACKr Code (Exclusive to my VS Code Course – https://vsCodeHero.com)
🟠 SuperHero Extension Pack: https://marketplace.visualstudio.com/items?itemName=codeSTACKr.superhero-extensions

🚢 Deploy for FREE on Vercel: https://vercel.com/ambassadors/codestackr
_____________________________________

💖 Show support!
PayPal: https://paypal.me/codeSTACKr
_____________________________________

Watch Next:
Web Development – Beginners Roadmap (2020) – https://youtu.be/iogabydg2y0
Playlist: Web Development For Beginners – https://www.youtube.com/watch?v=Ez4yHS2dsN8&list=PLkwxH9e_vrAJ0WbEsFA9W3I1W-g_BTsbt
_____________________________________

Connect With Me:
Website: http://www.codestackr.com
Twitter: https://twitter.com/codeSTACKr
Instagram: https://instagram.com/codeSTACKr/
Facebook: https://facebook.com/codeSTACKr
_____________________________________

** Affiliate Disclaimer: Some of the above links may be affiliate links, which may generate me a sales commission at no additional cost to you.

#codeSTACKr #MotionUI #learntocode

source