UI Animation, Motion Design & Micro Interaction Basics

An overview of UI animation for beginners!
Please take a moment to fill out the UI/Motion Design Survey for Course dropping later this year, Id really appreciate it!!!
Survey: forms.gle/xqhcUAT9snfHsM5f6
[e-mail]
_______________
1:28 Motion benefits
3:59 Types of Motion
6:56 Functional Motion
7:32 Structural Motion
9:06 Emotional Motion
9:53 Interaction Design Anatomy
10:50 Timing Basics
12:24 Staggered Timing
12:46 Common Easing Curves
13:56 Easing Visualization
16:06 Linear Easing
16:31 Ease In, Ease Out, Ease Both
18:14 Elastic (Spring) Easing
19:13 Good vs Bad Easing
19:48 Creating Depth with Motion
19:56 Depth with Relative Scale
20:50 Parallax Motion
23:44 Interactive Design Systems
25:21 Interactive Prototyping Tools
27:50 Made in Principle
28:25 Made in Studio
29:40 New Navigation Constructs
30:40 Data Visualization
31:25 When Digital gets Physical
32:00 Cool Micro Interactions
Featured Designers:
Pablo Stanley: dribbble.com/pablostanley
Charles Patterson: dribbble.com/CharlesPatterson
Martha Bergmann: dribbble.com/MarthaBergmann
Zak Steele-Eklund: dribbble.com/zakeklund
Gleb Kuznetsov: dribbble.com/glebich
Rafael Cespedes: dribbble.com/rafaelcespedes
Ehsan Rahimi: dribbble.com/ehsancinematic
Cuberto: dribbble.com/cuberto
Dennis Snellingberg: dribbble.com/dennissnellenberg
YanBin Tan: dribbble.com/YanBin_Tan
Yaroslave Zubko: dribbble.com/Yar_Z
Daniel Korpai: dribbble.com/danielkorpai
Aurelien Salomon: dribbble.com/aureliensalomon
Taras Migulko: dribbble.com/ui_migulko

[@JakePomperDesign]

Book a 1-on-1 session with me here! tidycal.com/jakepomper

[@dheiwofjjd]

Regret to see this amazing lecture 3 years later.

[@grzegorz722]

I know how much work is needed to prepare such video. I really appreciate that you spend your free time to share the knowledge of UI design here in YT. I have some background and most of this stuff is well known for me but still watching this was really a pleasure. Please keep going. Great job.

[@JakePomperDesign]

Thank you so much for your kind words! Glad you enjoyed the video 🙏

[@febryanyudha4671]

You are awesome! I can't wait for the course, I've been looking for motion design course just to complement my area of expertise! Please keep us updated

[@JakePomperDesign]

Thank you! You’re awesome too ☺️. Course is coming soon!!

[@aaronworrell995]

Can't wait for the course. Such an amazing & informative intro presentation to the subject. Thanks!

[@JakePomperDesign]

Thanks so much! I love reading these comments, really appreciate you supporting the channel. You’re gonna love the course 🤟

[@bluebutok9827]

Thank you so much for this video! By far the most informative and valuable video I've seen after hours of browsing.

[@oladejosmart7431]

This was really helpful, thank so much, I appreciate every bit of effort put into making this video. I'm definitely subscribing.

[@luma.cabral]

This video is priceless. I was looking for something exactly like this, mixed up theory and practical. Thanks a mill for sharing!

[@JakePomperDesign]

Yore so welcome, I’m glad you found it to be valuable and thanks for watching 🙌🙏

[@kenishajojo7725]

very helpful video. really very grateful for this video . hoping to learn more from watching these, also hoping to see more 33 mins videos as it motivates us to watch

[@christianonwubiko2696]

Awesome presentation. I am looking forward to more from you.

[@nigelabbott9764]

You got the eye for the subtle sweet effects. Thanks.

[@TirtaAlin]

This is such an awesome video as usual. Your videos deserve more view!

[@JakePomperDesign]

Thank you! i appreciate the kind words 😊 hopefully more people stumble on the channel

[@karuna1069]

Yess! we did learn all LOT of valuable info Jake! thanks for making this :)

[@JakePomperDesign]

So glad you found it helpful! Thanks for watching 🤙

[@morgan2690]

Such an amazing video... so much info condensed yet it's rlly easy to follow. Way better than any of the courses i took in uni haha Thanks so much for sharing

[@JakePomperDesign]

I'm glad you found it helpful, thanks so much for watching!

[@marlenegodoy6007]

WOW! You're such a great teacher, thank you! Love you!

[@JakePomperDesign]

🥰 thank you so much, I appreciate you taking the time to watch my videos!

[@raskarjr]

Absolutely helpful video, thanks for making this.

[@minhanhpham2508]

the most informative overview of UI animation for beginners!

[@JakePomperDesign]

Timestamps For your convenience: 1:28 Motion benefits 3:59 Types of Motion 6:56 Functional Motion 7:32 Structural Motion 9:06 Emotional Motion 9:53 Interaction Design Anatomy 10:50 Timing Basics 12:24 Staggered Timing 12:46 Common Easing Curves 13:56 Easing Visualization 16:06 Linear Easing 16:31 Ease In, Ease Out, Ease Both 18:14 Elastic (Spring) Easing 19:13 Good vs Bad Easing 19:48 Creating Depth with Motion 19:56 Depth with Relative Scale 20:50 Parallax Motion 23:44 Interactive Design Systems 25:21 Interactive Prototyping Tools 27:50 Made in Principle 28:25 Made in Studio 29:40 New Navigation Constructs 30:40 Data Visualization 31:25 When Digital gets Physical 32:00 Cool Micro Interactions

[@MrSpertuzm]

loving this channel! I'm a Visual Artist who is starting a transition to UX/UI and loving the idea to use creative ideas to solve problems in a critical and useful way, I will love to see a Figma tutorial about Design systems, and more webflow stuff about prototyping, because is not too much about prototype tutorials of webflow! nice channel, loving the tuts and the personal stuff about your first year in the field!

[@JakePomperDesign]

Glad you’re liking the content! Definitely more design system sand webflow stuff on the way! Welcome aboard

[@inuyasha561]

Thank you so very much for this this was very informative and helpful. I'll be following you.

[@quickhist.]

woww.!!!! too much details.. thank you so much

[@jimm8566]

Nice man that was a well put together presentation. LOVE FOR FLINTO!!! (The most underrated motion tool)

[@JakePomperDesign]

Thanks man! And agreed, Flinto will always have a special place in my heart ❤️

[@AnshMehraa]

This video had really really amazing insights. Thank you for making this!

[@JakePomperDesign]

I’m so glad you think so, thanks for watching 🙏

[@Mantoufe]

Nice video, very informative. You have a new subscriber!

[@jaygough3813]

This video was actually insanely educational!!! TY for this

[@JakePomperDesign]

Glad you thought so!

[@alevel79]

This might be one of the greatest videos about ui on KZbin. 👏🏻👏🏻👏🏻

[@JakePomperDesign]

Wow that’s such a flattering compliment! Thank you!

[@akshatgupta6565]

Much needed video! 🙌❤️ Thanks man! Dope content

[@JakePomperDesign]

Thanks for watching 🤙

[@FREESTEP_DANCE]

Great tutorial man. It would be amazing to see part 2 or even a series of these. Really like your style of teaching, very informative!

[@JakePomperDesign]

Thanks man! Glad you enjoyed - anything specific you’d like me to cover in a follow-up vid? Jake

[@FREESTEP_DANCE]

@@JakePomperDesign Thanks for asking. Off top of my head maybe some in-depth analysis of good motion examples, usability in motion, some advanced type of motion like parenting, cloning, masking, obscuration. More about timing, delay, offset and spring/elastic values. Maybe also screen transition where more than 1 element is effected (elements direction, easing, delay, stacking).

[@JakePomperDesign]

Karol Podżerek great feedback! Thank you! I’ll definitely look into including these topics in a future vid. They will definitely be part of my course too. Thanks again 🤙

[@jordialonso8196]

Great content in your channel! Thank you to share! :)

[@peaceadk]

Thank you so much for this video! Very indepth

[@ecesungur]

This is such a helpful presentation, thank you so much.

[@JakePomperDesign]

Glad you found it helpful, thanks for watching🙏❤️

[@kenj727]

OMG, Love the vid and love you! Brilliant video bruh

[@JakePomperDesign]

Kenj lol thank you! I love you too!

[@Kevin-pd2fs]

Awesome video! So helpful!

[@vigneshyesvy8874]

Very informative on UI animations, thanks for this work

[@JakePomperDesign]

Thank you, happy to help!

[@ArbaazKhan-wb2dt]

Wow, you are a great explainer. Thank You!

[@JakePomperDesign]

I appreciate you, thanks for watching!

[@Umair0047]

Great video. I really want to be UI designer after watching this. from now on you are my teacher.

[@JakePomperDesign]

🙌

[@derekling1941]

So much value in this 30 minute video!! It's easy to find tutorials teaching how to implement animations but very few go on to explain why a particular animation is chosen in each cases. Can't wait enrol in the course! Is there some mail subscription so that we can be notified once the course is out?

[@JakePomperDesign]

Thank you for your kind words, Derek! I’ve included a link to a survey in the description, you can enter your email there and you’ll be notified when it’s out! Cheers! Jake

[@tochidioka6019]

The last example on the structural motion… please how can I achieve that with a design? Especially with a profile page?

[@mar-17905]

@@JakePomperDesign Where is your course I can’t find it anywhere online?

[@KT-ue2mx]

Amazing vodeo. So useful! Thank you very much!

[@JakePomperDesign]

Thank you, so glad you found it helpful!

[@Klarsonium]

This was absolutely wonderful and insightful. Thank you so much :)

[@JakePomperDesign]

Thank you! I’m glad you thought so, thanks for watching 😀

[@Klarsonium]

@@JakePomperDesign I'll be watching a lot more 😀 well done!

[@rutujakale779]

Its amazing😍!! I really want to learn that all techniques of motion that u told in this video pls share also video of creating motion

[@rutujakale779]

Nd pls kindly share even software u used for... 🙁

[@emmapotter2333]

Oh MY...what a great tutorial! The explaination and examples! I have to pause the video to leave this comment, I really have to.

[@emmapotter2333]

The amazing thing I found that is the level of 'human centered' of this video. I consider this is a good example of HCD

[@barbararezende5835]

such great content! thank you!

[@michapilecki4808]

Wow! Thanks for your work!

[@JakePomperDesign]

Any time, thanks for watching!

[@emilythornberg2170]

So informative. Thank you very much!

[@JakePomperDesign]

You’re very welcome, thanks for watching!

[@Danni24]

Eh please this is a master class !!! Thank you!!

[@JakePomperDesign]

Dani Guevara thanks for watching ☺️

[@emmanuelepiscope4853]

thank you sir, please continue to help us

[@JakePomperDesign]

You’re welcome! More videos on the way 👍👍

[@anjathomae9659]

cooool, thank you so much

[@justjoe233]

thanks for the introduction to UI animation!

[@JakePomperDesign]

Thanks for watching!

[@user-xk9on2yy4x]

It's very usefull things, thanks👍

[@isabellas5765]

So helpful! Thank you so much!

[@JakePomperDesign]

You’re welcome, I’m glad you found it helpful ☺️

[@ZhengCheng]

Great Video! Thank you!

[@JakePomperDesign]

Zheng Cheng you’re welcome! Thanks for watching

[@tanyaarora2907]

Amazing video

[@gold4everyone]

outstanding work! thank you!!!!

[@JakePomperDesign]

Appreciate you 🙏

[@shair-e]

very very helpful video. thanks for sharing

[@JakePomperDesign]

Glad to hear it, thanks for watching 🙏

[@dittejrgensen3016]

Such an informative video! Thanks. :-)

[@JakePomperDesign]

Thank you! You’re so welcome, thanks for watching 🙌

[@aniharutyunyan7965]

Amazing !! thank you

[@JakePomperDesign]

Thanks for watching!

[@ThisIsChubaTV]

This is such a great video JP. Soooo much real-world value. Thank You. Edit: You've got to make more Invision studio Videos man, I know the world seems to have all decided on Figma (and I love it too) but for all its shortcomings, Invision studio still has some of the best animations for prototyping IMO.

[@JakePomperDesign]

Thank you! More tutorials coming soon!

[@magnuscritikaleak5045]

@@JakePomperDesign helped me so much.

[@AJ-dy2bt]

Excellent presentation, especially for me as an app developer its very useful. Thanks a lot and all the best!

[@AJ-dy2bt]

Avocado is a good choice for demonstration). Especially, because I'm eating it right now. I slows down my spoon with avocado before my mouth. So, ease out motion is really works!

[@JakePomperDesign]

Thank you for your kind words! Ease out that avocado hahahaha 🥑

[@AJ-dy2bt]

@@JakePomperDesign Actually I'm already started experimenting with curves in flutter. There is a library with a lot of predefined curves. api.flutter.dev/flutter/animation/Curves-class.html. As you mention in your presentation speed is matter a lot. It dramatically change perception. Thanks a lot again for giving me direction!

[@mengshi96]

Great content! Liked and subscribed!

[@JakePomperDesign]

Meng Shi thank you! Welcome aboard 🤙

[@sosochitishvili2927]

Thank you man, your videos are inspirational.

[@JakePomperDesign]

Soso Chitishvili so glad to hear it, thanks for watching 🙏

[@sosochitishvili2927]

@@JakePomperDesign ❤

[@atharva4937]

🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🙏🏼🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🌈🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻🙏🏻respect you for providing such tutorial and knowledge on KZbin for free. Really really appreciate it man.🙏🏼🙏🏼 Respect

[@JakePomperDesign]

Happy to help! I appreciate you

[@jillsmith8444]

I needed this video more than you could know GOD BLESSSS youuu! thank you sm

[@JakePomperDesign]

So happy to help!! Thanks for watching 🤙

[@jillsmith8444]

@@JakePomperDesign yes its helping me with a animation presentation tomorrow. Ill be here for ALL the content!!

[@jillsmith8444]

@@JakePomperDesign also if this is in your interests at all, you should show how you make good slides! I would love to see how you made this video its perfect for presenting

[@JakePomperDesign]

Good idea! A few other people have asked about using Flinto and other tools for presentations like this, I’ll add it to the list. Thanks for the suggestion...and good luck with your presentation!

[@uichakir836]

thank you !

[@bppb1196]

Amazing presentation ! I wish my courses at my 10K/year school were as detailed and complete as this lol .

[@JakePomperDesign]

Lol thank you for your kind words!

[@kenbee85]

Thanks for this amazing

[@JakePomperDesign]

Thanks for watching!

[@elijahmbang2728]

Men I love this content someone should just take time and do a course on animation, UI montion really🤔🤔🤔 but from this content wow am amazed 💙💙💙 keep up the good work

[@JakePomperDesign]

Thank you! Course coming soon 🙌

[@gamalirmiya3701]

Amazing

[@JakePomperDesign]

Thank you!!! 😊

[@kunleadelowo1106]

when is your course launching. I'm definitely going to sign up

[@keto9423]

Thank you

[@JakePomperDesign]

Thanks for watching

[@Helen-de7yp]

Thank you for taking the time to create such an amazing video. Are there any free tools one can use to learn before having to pay?

[@JakePomperDesign]

Most of these tools have free trials!

[@madhumia1196]

helpful

[@herrschultz7413]

Hi! I really love this video! Just a quick question, at 9:03, the right app, how does one "record the screen motion + have the iphone screen" without having a background? I'm currently prototyping a design in Figma, and I would love to record the interaction but also not have a background appear.

[@Harry-xe8kh]

Most Deserve the Video, Can You Please explain about Grid, components, auto layout, and also one thing can you please. Recommended the channel or if you have it, the best channel on adobe illustrator, I'm a new subscriber today 😇

[@sebastianpiedrahitaorozco9419]

Excellent job bro, thanks for the information, which one is the tool that you used for the presentation?

[@JakePomperDesign]

Thanks man! I used Flinto for the presentation

[@dave3k]

Protopie is pretty cool from my limited experience, you should check it out!

[@JakePomperDesign]

I’ve dabbled with it since making this video, it is definitely really awesome but the workflow is a bit different than what I’m used to. I’m going to dive deeper this year for sure though!

[@dave3k]

@@JakePomperDesign I made my first animation yesterday. It’s definitely the most intuitive app I’ve tried so far. Not sure I’ll bother with trying After Effects for the foreseeable. With regards to your course I don’t think you should bother with teaching how to use an app. Just make it platform agnostic and teach the techniques on how to make average animations great with timing and duration etc.

[@IsionIndustries]

I love how very detailed this video is. Although I would throw in After Effects in the last part about UI motion tools.

[@JakePomperDesign]

Ision Industries thank you! As I mentioned in the video, I did not include after effects because you cannot create interactive prototypes in AE (although you can export lottie animations)...but still a great tool nonetheless!

[@magnuscritikaleak5045]

@@JakePomperDesign have you tried Cinema4D or 3D Blender software? I believe it is great for Immersing the viewer into using your ui tools.

[@user-rp3gm3yw2k]

which app do you use for motion desig? Figma or After Effect?? Any Recommendation?

[@designeranthony]

How do I start learning more about interaction and motion design?...Where do I start?

[@HamzaBilal-kr5ns]

can you plz tell me the name of the tool, video, software where these kind of mobile animations are created?

[@flutistbanda]

When are you launching the course?

[@Shyloo]

Hello, I am a student of application developer... But this is really what is want to do, design and make website with these tools.. Am I following the right education for this? Thanks a lot

[@brandoxide6392]

which UI motion tool will be easiest for me? I am a newbie

[@venkatsurya3005]

Hai friend how you convert this animation effect in html. do u have any open source plugin

[@0xgroot]

how have i not seen this video before now??

[@JakePomperDesign]

Welcome! lol

[@JustLovely821]

At 22:50, Charles Patterson's design on the right side (the parallax motion, but with the bg image fixed): in a few words (hah), how does one accomplish this? Can't seem to figure it out. Thanks in advance and also, this was a SUPER helpful video, thank you. I've been flying through almost all of your videos, hoping you do a lot more! :))

[@JakePomperDesign]

JustLovely821 hi there! Thanks for your question - I haven’t personally tried this interaction yet - but at a glance, I would set horizontal scrolling on the group of cards. The cards themself should mask off the image within (make sure the image is larger than the mask). Then you can “pin” the images in the cards so they do not move when you scroll horizontally. You can find the pinning option in the right panel in Studio. Let me know if this helps, I could also just make a tutorial on this if that’s something you’d like! Cheers, Jake

[@JustLovely821]

@@JakePomperDesign Yeah definitely! Would be super helpful :) Thank you!

[@JustLovely821]

@@JakePomperDesign NVM! I actually found that he posted a mini tutorial here: facebook.com/100010564816489/videos/821772594851560 (for anyone else who is interested!)

[@meenakshisaxena5214]

🙏

[@SaadDesign]

Hi, I am saad ibn sayed.When i do UI animation in after effect ,i can't test my animation in mobile . So how i can do this???? Please make a tutorial for that.

[@JakePomperDesign]

Hi there! After effects will only output videos, so they will not be interactive

[@gkytstudio]

Crafted video.

[@GameIsland63]

Do you have a tutorial for figma?

[@skyridertk]

Motion designer: Alright. There you go. We need it implemented as exactly as the design Developer: (0_0) you gotta be kidding me (Developer has left earth)

[@JakePomperDesign]

Nothing I showed is particularly difficult to implement…

[@mdjahin99]

Is the UI Animation course out ?

[@g77222]

why go to uni when you have ppl like this dude!

[@JakePomperDesign]

I’m flattered 🥰 thank you!

[@g77222]

@@JakePomperDesign so I just have a question, I got my cert in Figma, I'm going into UX/UI as a career. I know the fundamentals. I know I need to learn these cool motion softwares to make an impact. What should I learn next to get that a UX/UI full time job?

[@JakePomperDesign]

@@g77222 that’s awesome that you’re pursuing a UI/UX career. I’d say that more important than any tools is first and foremost being able to solve a problem and create value. Once you understand the problem you are solving, you will need to demonstrate how you went about solving it via digital design. Lastly, keep improving your UI/visual design skills. You can watch my “UX case study example” video which will give a sense of they type of work you will need to have in your portfolio when applying to roles. Good luck! Jake

[@g77222]

@@JakePomperDesign this is why I value youtube more than any other course website. Thank you. I'll be binge watching your videos. #officialyhooked.

[@hamzamunir2750]

HI Jp, i don't know where to start can you recommend some course. I'm a UI/UX designer badly want to learn Ui Animation

[@JakePomperDesign]

I’m coming out with my own course very soon, but in the meantime you can watch a lot of my videos for free on KZbin!

[@jeorc]

I really enjoyed watching this video. I think this video is a great way to get your feet wet. It is at least for me. Thanks for sharing.

[@andyeng7183]

Hi, InVision Studio animation can convert to react native?

[@JakePomperDesign]

No, studio is only a prototyping tool

[@JustLovely821]

Okay, another question. At 7:33, the material design in the middle: how do you achieve this in Studio or Principle? I've got some of it down in Studio...but there's subtle things like the scaling seems delayed ever so slightly and there might be easing differences between the top/bottom line and its properties (scale, x/y, rotation) Seems so simple, but I'm hitting roadblocks, haha. Appreciate any help! Here's a better view of the full menu animation I'm trying to practice replicating: material.io/design/motion/the-motion-system.html#shared-axis (under Z-axis).

[@JakePomperDesign]

JustLovely821 definitely is possible in both

[@JustLovely821]

@@JakePomperDesign okay I think I've nailed it down...like 90-95%, haha. it's not perfect, but close enough to get the point across haha

[@Lmfenhir]

Where is the course?

[@feyza2711]

Hi I have question because I’m counfused .Can I do these animations on affinity designer / code animator or Procreate. Should I deliver these in which format to client? Are we designing these just for prototype? Or the developers implement the animation which we created in vector based animation? Basically question is : Clients expect from designers the animation in which format ? If you help me It would be great 👍🏼

[@feyza2711]

I’m talking about non interactive animations. For example logo on launching screen, icons, animations on tutorial etc

[@JakePomperDesign]

For non-interactive animations like launch screens, I’d recommend animating in after effects and exporting as a Lottie file, or a video for a dev to implement. These can be designed in the tools you mentioned (or any other design tools) and brought into after effects to animate. Hope this helps!

[@feyza2711]

@@JakePomperDesign Yes it is thank you. Last thing, Is there thing like svg animations?

[@designeranthony]

The thing that pains me the most is that Flinto is such a good tool for prototyping, but when it comes to branding they are stuck in 2012. Will always have Flinto apart of my toolkit.

[@vlogwithabhi7376]

how i learn ui animation