Transition patterns describe how the change between different views or states in an app is designed. Well-designed transitions can significantly improve the user experience by providing orientation and making the app appear more lively.
Information
Why
Orientation
Animations can help the user to understand where a new element comes from or where an element disappears to, which supports spatial orientation in the app.
Feedback
You can confirm actions and display the status of processes.
Aesthetics and perception
Smooth and meaningful transitions make an app appear more polished and professional. Smooth transitions can contribute to the emotional impact.
Principles
Subtlety
Transitions should not distract or impair performance. They are supportive, not the main focus.
Consistency
Similar actions should use similar transitions.
Performance
Animations must run smoothly and must not slow down the app.
Slide in/out
Elements or screens slide in from the side.
Fade in/out
Elements or screens fade in or out gently.
Push
Elements or screens move aside.
Expanse/Collapse
Elements enlarge to show more details or shrink.