Learn Zumly in six short steps
Each step is one idea, a small example running on the page, and the code to copy. From the first view to gestures, it takes about twenty minutes.
- Your first appA canvas, two views and one trigger.
- Going deeperMore levels, view titles and the back button.
- SiblingsMove sideways between views of the same parent.
- Where views come fromFunctions with props and state, URLs and frameworks.
- Navigating from codezoomTo, goTo, zoomOut, back, events and the router.
- Motion and gesturesTiming, effects, drivers and gestures that follow your fingers.
What Zumly is
Zumly is a JavaScript library for zoom navigation, also called a zooming user interface (ZUI). Your interface is a set of screens called views. Clicking an element zooms into it, and the next view grows out of that element. Zooming out goes back the same way.
It is not an infinite pan-and-zoom canvas like a map or a whiteboard. Movement happens in steps, through the elements you mark as triggers, and each view loads only when it is needed. You write the HTML and CSS; Zumly computes and animates the transforms.
| Zumly | Pan-and-zoom canvas | |
|---|---|---|
| Moves | In steps, from a trigger to its view | Freely, to any point and scale |
| Content | Separate views, loaded on demand | One large surface |
| Good for | Dashboards, drill-downs, menus, kiosks, configurators | Maps, whiteboards, diagrams |
It is a poor fit for long reading flows and plain forms, where there is nothing to zoom into.
Why Zumly
- Zoom from the element. The next screen grows out of what you clicked and shrinks back into it, so you always know where you came from.
- Context stays. The screens you came from wait behind the current one, dimmed. Click one, scroll, swipe or press ← to go back.
- Depth and siblings. A back button at every level (it can show the parent's name or jump several levels), arrows and swipe between siblings, and browser history with the router.
- Gestures. Pinch, swipe or the trackpad drive the zoom-out as you move. Let go past the middle and it finishes; otherwise it goes back.
- Any animation engine. CSS by default, or Web Animations, GSAP, Anime.js, Motion or a driver of your own. The same ease gives the same curve on all of them.
- Your views, your framework. HTML strings, URLs, functions, or React, Vue, Svelte and Angular components. No dependencies.
- Accessible. Keyboard, focus and screen-reader labels work out of the box.
Guides
Drivers
Animate with an animation library, or write your own driver.
Navigation controls
The back button and the sibling bar: every option, live, and how to build your own.
Heavy views
Smooth zooms with thousands of nodes or frosted glass, with a SnapDOM photo of each view behind.