Complete Guide to UI Animation and Tools in UNDER 10 minutes!

UI animations, micro-interactions and interaction design are what give apps and web pages personality. Adding the right UI animations can make for a more delightful, functional or informative user experience. In this complete guide, I'll walk you through the foundations of UI animation and micro-interaction design, show you practical examples and give you a run-down of all the tools and techniques you need to know to make the most incredible web and UI animations yourself.
👉🏽 Try ProtoPie here | go.designerup.co/protopie
🔗 Links to Animation Resources | designerup.co/blog/complete-g...
🎥 WHAT TO WATCH NEXT
⊚ UI Design Crash Course | • UI Design Crash Course
⏱ TIMESTAMPS
00:00 - Intro
00:14 - The basics of UI animations
00:27 - 2 Categories of UI Animations
01:02 - Common Animation and Micro-interaction use cases
01:54 - Step 1
02:24 - Step 2
04:19 - Tools
04:48 - Step 4
05:27 - 12 Principles of UX in Motion
6:27 - Step 5
07:04 - Javascript Libraries
07:19 - Important notes
🔗 MENTIONED IN THIS VIDEO
⊚ @ProtoPie discount | go.designerup.co/protopie
⊚ Framer Motion | go.designerup.co/framer
⊚ @Rive_app
⊚ @Uxinmotion.net
📚 PRODUCT DESIGN (UX/UI) COURSE I RECOMMENDED
⊚ Enroll Now | designerup.co/product-design-...
📒 GET FREE DESIGN LESSONS
⊚ Free UI Design Crash Course | designerup.co/ui-design-crash...
⊚ Newsletter | designerup.co/newsletter
⊚ Live Webinars | designerup.co/webinars
📖 READ THE BEST DESIGN ARTICLES
⊚ Blog | designerup.co/blog
🥰 JOIN OUR NEWSLETTER
⊚ Get exclusive lessons | designerup.co/newsletter
🧰 RECOMMENDED PRODUCT DESIGN TOOLS
⊚ ProtoPie - Advanced prototyping tool | go.designerup.co/protopie
⊚ Figma - Industry standard design software | go.designerup.co/figma
⊚ Notion - UX research organization and notes | go.designerup.co/notion
⊚ Framer - No-code website platform | go.designerup.co/framer
⊚ Uizard - AI to UI tool | go.designerup.co/uizard
⊚ Icons8 - High-quality icon set | go.designerup.co/icons8
⊚ Lunacy - Figma alternative | go.designerup.co/lunacy
⊚ Mobbin - Design Pattern examples | go.designerup.co/mobbin
⊚ Setapp - Discounts on apps and software | go.designerup.co/setapp
🙋🏽‍♀️ ABOUT ELIZABETH ALLI
⊚ Senior Product (UX/UI) Designer
⊚ Founder of DesignerUp the first Mindful Product Design (UX/UI) School
⊚ Trained teacher
⊚ TH-cam creator
⊚ Author
💬 CONNECT WITH US
⊚ Twitter | / designerupco
⊚ Instagram | / designerupco
⊚ Facebook | / designerupco
⊚ LinkedIn | / designerupco
⊚ Pinterest | / designerupco
*Some of the links listed in the description may be affiliate links through which we may earn a small commission. They are at no cost to you and often include discounts that we pass along! These help keep our free channel going and help us continue to create the highest quality content possible. So thanks for your clicks and your support! 💜
💻 SPONSORSHIP AND COLLAB INQUIRIES
⊚ Email | [e-mail]

[@mojito1216]

Please make complete tutorial for animation ❤

[@charleshaddock4426]

This is like the missing guidebook or all the questions I've had. Thank you!

[@user-fq3li2qy7p]

it is my dream to work with designerUP

[@bibibayjikova590]

amazing intro video for UIXers who want to leverage into motion design. thank you

[@DesignerUp]

Thanks Bibi! Appreciate it 💜

[@uifry]

Awesome, Create more tutorial like this :)

[@miiishkaaaaaa]

tnx) its amazing video!

[@DesignerUp]

Glad to hear you enjoyed it!

[@MaddyVenky7]

Create a playlist for protopie please

[@DesignerUp]

Already have one! ProtoPie Tutorials
th-cam.com/play/PLl0Umi92CQzWQol8AoPi3O02OsHdIJ2MC.html