Movement and transitions—fade, slide, scale, parallax, stagger. 10 animation patterns for guiding attention and providing feedback.
Motion patterns guide attention, show relationships, and provide feedback through animation. These 10 patterns include fade, slide, scale, bounce, parallax, stagger, spring physics, page transitions, micro-interactions, and loading animations. Good motion is purposeful (guides attention), fast (< 300ms for most), and respectful (honors prefers-reduced-motion). Avoid animation for decoration alone.
Ease in out creates smooth animations that start slow, speed up, then slow down. Learn when to use it and how to tune timing curves.
Spring animations use physics simulations for natural, bouncy motion. Learn when to use them and how to tune spring parameters.
Snap animations move elements instantly to target positions without animation. Learn when immediate feedback is better than smooth motion.
Fade animations gradually change opacity from transparent to visible. Learn when to use fades vs. slides and how to time them.
Slide animations move elements in from off-screen. Learn when to use slides and how to choose direction for intuitive UX.
Scale animations grow or shrink elements from a point. Learn when to use scale and how to choose origin points.
Bounce animations overshoot the target and bounce back. Learn when to use bounces for playful, attention-grabbing effects.
Morph animations smoothly transform one shape into another. Learn when to use morphing and how to implement it.
Parallax motion creates depth by moving elements at different speeds. Learn when to use it and how to avoid motion sickness.
Stagger animations reveal elements one after another with delays. Learn how to create smooth, sequential transitions.