Step 2 of 6

Going deeper

Put a trigger inside a view you zoomed into, and you go one level deeper. There is no limit.

Live exampleOpen ↗

Zoom down to the clownfish. The button at the bottom left shows where you would go back to.

The code

Only the script changes from step 1; the styles are in the example.

const app = new Zumly({
  mount: '.canvas',
  initialView: 'ocean',
  views: {
    ocean: `<div class="z-view ocean" data-title="Ocean">
              <h1>The ocean</h1>
              <div class="zoom-me peek reef" data-to="reef">Coral reef</div>
            </div>`,
    reef: `<div class="z-view level reef" data-title="Coral reef">
             <h2>Coral reef</h2>
             <div class="zoom-me peek anemone" data-to="anemone">Anemone</div>
           </div>`,
    anemone: `<div class="z-view level anemone" data-title="Anemone">
                <h2>Anemone</h2>
                <div class="zoom-me peek clownfish" data-to="clownfish">Clownfish</div>
              </div>`,
    clownfish: `<div class="z-view level clownfish" data-title="Clownfish">
                  <h2>Clownfish</h2>
                  <p>Four levels deep.</p>
                </div>`
  },
  // The back button shows the title of the view above
  depthNav: { style: 'title' }
})
app.init()

How it works

Each level is just another view with its own triggers. Zumly keeps three levels on screen (current, parent and grandparent) and detaches deeper ones until you come back.
data-title gives a view a readable name. The back button, the sibling dots, screen readers and getViewStack() use it. Without one, the view name is used.
The views behind the current one stay in place, dimmed and inert. Clicking them zooms out.
Each trigger here is a small copy of the view it opens: same shape, same color. The new view grows exactly out of it, and the zoom reads as going into the thing you clicked.

The back button

depthNav picks its style and its corner:

style	Shows
`'button'`	A dot in its ring. The default.
`'title'`	The title of the view above, as in this example.
`'rings'`	A ring per level above. Hover it, long-press it or press ArrowUp to open a band per level and jump several at once.

depthNav: { style: 'rings', position: 'top-left' }

Try style: 'rings' in the example: open it in a new tab, save it, and change one word. Four levels deep, you get three rings.

All the options of the back button and the sibling bar, side by side and live, are in Navigation controls.