Motion UI - User Interface Animation (2020)

Channel:
United States codeSTACKr
Subscribers:
296,000
Published on ● Video Link: https://www.youtube.com/watch?v=smLtxYI-zSs


Duration: 56:31
12,395 views
298

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



Other Videos By codeSTACKr


2020-01-31JavaScript setTimeout & setInterval In 90 Seconds #JavaScriptJanuary
2020-01-30JavaScript Classes In 90 Seconds #JavaScriptJanuary
2020-01-29JavaScript Object Methods In 90 Seconds #JavaScriptJanuary
2020-01-28JavaScript Modules In 90 Seconds #JavaScriptJanuary
2020-01-27JavaScript Async/Await In 90 Seconds #JavaScriptJanuary
2020-01-26JavaScript Fetch API In 90 Seconds #JavaScriptJanuary
2020-01-25JavaScript Promises In 90 Seconds #JavaScriptJanuary
2020-01-24JavaScript call() apply() bind() Methods In 90 Seconds #JavaScriptJanuary
2020-01-23JavaScript Functions In 90 Seconds #JavaScriptJanuary
2020-01-22JavaScript Array Some & Every Methods In 90 Seconds #JavaScriptJanaury
2020-01-21Motion UI - User Interface Animation (2020)
2020-01-21JavaScript Array forEach in 90 Seconds #JavaScriptJanuary
2020-01-20JavaScript Switch Statement In 90 Seconds #JavaScriptJanuary
2020-01-19JavaScript Spread Operator In 90 Seconds #JavaScriptJanuary
2020-01-18JavaScript Array Accessor Methods #JavaScriptJanuary
2020-01-17JavaScript Array Mutator Methods #JavaScriptJanuary
2020-01-16JavaScript Array Reduce Method In 90 Seconds #JavaScriptJanuary
2020-01-15JavaScript Array Filter Method In 90 Seconds #JavaScriptJanuary
2020-01-14JavaScript Array Map Method In 90 Seconds #JavaScriptJanuary
2020-01-13JavaScript For In & For Of Loops #JavaScriptJanuary
2020-01-12JavaScript For Loops #JavaScriptJanuary


Tags:
javascript
html
css
motion ui
animation
javascript animation
intersectionobserver
intersectionobserver javascript
javascript intersectionobserver
js intersectionobserver
intersectionobserver js
js animation
js
anime.js
anime.js tutorial
javascript tutorial
web development
js tutorial
motion user interface
user interface animation
animate on scroll
scrolling
on scroll
ui animation
web design
ui design
design trends 2020
ux design
ui animation tutorial