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.
Embedded prototype: foil-visa-23684284.figma.site › Slideinout
Fade in/out
Elements or screens fade in or out gently.
Embedded prototype: foil-visa-23684284.figma.site › Fadeinout
Push
Elements or screens move aside.
Embedded prototype: foil-visa-23684284.figma.site › Pushes
Expanse/Collapse
Elements enlarge to show more details or shrink.
Embedded prototype: foil-visa-23684284.figma.site › Expandcollapse