Foundation
MotionMotion in action — specific examples showing how animation creates better user experiences.
Product Transitions
Transitions help with focusing attention, masking latency, and creating a consistent experience
Navigate
Quick navigation to a new page. Most common pattern on web, used for selecting key pages from navigation.
Push
Most common transition on mobile. A clear signal for users that they can return to where they were.
Glide
Most expressive transition. Creates consistency by transferring key elements seamlessly between pages.
Reveal
Used to introduce new content such as bottom sheets, modals, and popovers.
Loading
Additive to other patterns. Reduces friction, focuses attention, and creates the illusion of shorter wait times.