Explore collections
A custom scroll minimap that lets users navigate content using a draggable viewport synced with images.
Minimap Scroll Navigator is a fully custom scroll system that replaces native scrolling with a GSAP-driven interaction. A visual viewport (box) tracks user movement across a list of thumbnails, dynamically updating the main preview. It supports both wheel and touch input, handles responsive layout changes (horizontal/vertical), and recalculates bounds on resize.
npm i gsap
Ideal for portfolio galleries, project showcases, media explorers, or any interface where visual navigation and custom scrolling interactions enhance UX. This component works best in full-screen sections where no additional content exists above or below. Each item in the minimap can act as a navigation trigger (e.g., opening a project page), making it ideal for interactive galleries and portfolio navigation. For optimal experience, use between 10–30 items. Too few items reduce the usefulness of the minimap, while too many can affect clarity and performance.
Advanced
| Prop | Type | Description |
|---|---|---|
| ease | string | GSAP easing function controlling how smoothly the minimap and preview transition during scroll or touch movement. |
| duration | number | Duration (in seconds) of the animation when the minimap moves in response to user input. |
| sensitivity | number | Controls scroll sensitivity. Lower values create smoother, slower movement, while higher values make the minimap respond more aggressively to input. |
These components are designed for developers who have at least an intermediate understanding of React and GSAP. To fully customize, extend, or modify the behavior, familiarity with both libraries is recommended. They are not specifically intended for absolute beginners.
However, beginners can still use them by simply copying and pasting the code.
© 2026 dropui.design