← Back to Motion & Animation

Common transition patterns that create smooth, predictable, and delightful user experiences. These patterns provide spatial context and visual continuity in your interface.

Opacity
Position
Scale
Rotation
Bounce
3D Transform

Fade In/Out

Simple opacity transition for subtle appearances

Tooltips, notifications, modal overlays

Slide In/Out

Directional movement for spatial context

Side panels, drawers, carousel items

Scale In/Out

Size-based transitions that draw attention

Modals, buttons, cards

Rotate In/Out

Rotational movement for dynamic effects

Loading spinners, icon changes, creative transitions

Bounce In/Out

Playful bounce effect for positive interactions

Success messages, achievements, celebrations

Flip In/Out

Card flip effect for revealing content

Card reveals, content switching, image galleries

Choosing Patterns

  • • Fade: For non-spatial changes
  • • Slide: For spatial movement
  • • Scale: For attention and hierarchy
  • • Rotate: For state changes
  • • Bounce: For positive feedback
  • • Flip: For content reveals

Performance Tips

  • • Use transform properties for GPU acceleration
  • • Avoid animating layout properties
  • • Use will-change for complex animations
  • • Remove will-change after animation completes
  • • Test on lower-end devices

Fade + Scale

Perfect for modals and overlays

opacity + transform: scale()

Slide + Fade

Great for drawer navigation

transform: translateX() + opacity

Rotate + Scale

Dynamic for loading states

transform: rotate() scale()