Zumly - Zoom-based navigation for the web
My notes
Summary
Zumly is a framework-agnostic JavaScript library that replaces traditional page navigation with hierarchical zoom transitions. Users click elements to zoom into deeper views, creating spatial depth instead of flat page swaps. Supports multiple animation drivers (CSS, WAAPI, GSAP, Anime.js) and works with React, Vue, Svelte, and vanilla JS.
Key Insight
- Navigation is spatial and hierarchical: users zoom into focused elements (Z-axis depth) rather than clicking through flat pages. Lateral navigation handles sibling views at the same level.
- Framework-agnostic with pluggable everything: views can be HTML strings, URLs, async functions, web components, or render objects. Transition drivers include CSS (default), Web Animations API, GSAP, Anime.js, Motion, or fully custom functions.
- Built-in UX affordances: configurable back buttons, lateral arrows/dots, URL hash routing via plugin, view caching with 5-min TTL, and hover/focus/scan-based prefetching.
- Performance-conscious: batched DOM reads, pure math geometry calculations to minimize layout thrash, deferred rendering option that waits until animation completes.
- Under active development with 172 GitHub stars, 263 commits, and 11 forks. Small but growing community.
Why it matters
Zoom-based navigation is a compelling alternative for complex dashboards, product configurators, and portfolio sites where spatial hierarchy communicates information architecture better than breadcrumbs or menus. For projects involving ecommerce product exploration, service showcases, or data-dense dashboards, this could differentiate a build from typical SPA navigation. The framework-agnostic design means it slots into any existing stack without commitment. Worth prototyping for the right use case, particularly automotive/luxury brands or interactive presentations where the “zoom into detail” metaphor fits naturally.