Transitions
Delight
Transitions are animated motion pieces that guide and segue the customer’s eye towards new spaces and states of interactions, especially immediately after an operation or interaction has happened. They can provide cognitive clarity, satisfaction and delight.
Content Transitions
Usage
Transitions within a component or element should distinctly draw the Card Member’s eye towards the element that was interacted with. Surrounding elements should subtly fade into the background.
Example
Page Transitions
Usage
When using transitions to move between pages, content should fully fade out and back in to demonstrate that the page has changed. If a specific piece of content remains constant between the two pages, the fade in transition should draw the customer’s eye towards the content block.
Example
Slides
Usage
Use slides to transition components being loaded into or out of a view, and to give the customer context about direction. For example, elements sliding down and fading out provide a visual cue that a component is being unloaded from the view and prepares the user for another set of components to slide up and fade in as they load into the view.
Specs
Translate-Y = 50px
Opacity = 100% to 0%
Timing = ease all 0.3s