←Back to Patterns
UI Patterns Learning App
🔍 Pinch to Zoom Pattern
Allow users to zoom in and out of content using pinch gestures or mouse wheel, with smooth panning support.
🎯 Interactive Example
Use pinch gestures on mobile or mouse wheel on desktop to zoom. Drag to pan when zoomed in.
100%
How to Use
• Pinch with two fingers to zoom in/out (mobile)
• Use mouse wheel to zoom in/out (desktop)
• Drag to pan when zoomed in
• Use the zoom controls for precise control
• Click reset to return to original size
💻 Code Example
JSX
Loading source code...
✨ Key Features
✓
Pinch Gestures
Natural zoom with two-finger pinch
✓
Mouse Wheel Support
Zoom with mouse wheel on desktop
✓
Pan & Drag
Move around when zoomed in
✓
Zoom Limits
Prevent over-zooming or under-zooming
✓
Smooth Animations
Fluid transitions and visual feedback
✓
Reset Functionality
Return to original size and position
🎯 Use Cases
🖼️
Image Viewers
Examine photos and images in detail
🗺️
Maps & Charts
Navigate detailed maps and diagrams
📄
Document Viewers
Read and examine documents closely