Meaningful Motion UI
- Get now
- Learn more
Intro

What is Meaningful Motion UI?
The 4 types of user interface motion
Conversational Motion

Font files for sample project
Sample Project (Step #1)
Creating a basic animated prototype
What Google, Apple, and Salesforce can teach us about integrating motion into design systems
How to add motion to your design system
Functional Motion

Sample Project (Step #2)
Animating user flows with custom motion transitions
Sample Project (Step #3)
Creating a custom progress slider
Sample Project (Step #4)
Using multi-step animations to create loading indicators
Sample Project (Step #5)
Highlighting important actions with custom easing curves
Structural Motion

'Container animation' example file
Sample Project (Step #6)
Collapsing drawer navigation with advanced timing and grouping
Sample Project (Step #7)
Using masking and motion for full-page transitions
Sample Project (Step #8)
Adding depth with parallax animation
'Realism and momentum' example file
Simulating reality by customizing animation properties
Emotional Motion

'Personality' example file
Connecting with users through motion
Sample Project (FINAL)
Next Steps

Growing as a user interface motion designer
Bonus!

Exporting animation from InVision Studio

Functional Motion

8 Lessons