Your first app

The code

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Hello Zumly</title>
  <link rel="stylesheet" href="https://unpkg.com/zumly/dist/zumly.css">
  <script src="https://unpkg.com/zumly/dist/zumly.js"></script>
  <style>
    body { margin: 0; font: 20px system-ui, sans-serif; }
    /* The canvas fills its nearest positioned ancestor: give it a size. */
    .stage { position: relative; height: 100vh; }
    .z-view { display: grid; place-items: center; }
    .hello { width: 100%; height: 100%; }
    /* The O and the view it opens are both the Earth, so one grows into the other */
    .earth { border-radius: 50%; background: #000 url(https://upload.wikimedia.org/wikipedia/commons/thumb/9/97/The_Earth_seen_from_Apollo_17.jpg/500px-The_Earth_seen_from_Apollo_17.jpg) center / 108%; }
    .zoom-me { display: inline-block; width: 0.9em; height: 0.9em; vertical-align: -0.12em; cursor: zoom-in; }
    .world { width: 320px; height: 320px; color: white; font-weight: 600; text-shadow: 0 1px 8px #000; }
  </style>
</head>
<body>
  <div class="stage">
    <div class="canvas zumly-canvas"></div>
  </div>
  <script>
    const app = new Zumly({
      mount: '.canvas',
      initialView: 'hello',
      views: {
        hello: `<div class="z-view hello">
                  <p>H E L L O &nbsp; W <span class="zoom-me earth" data-to="world" aria-label="O"></span> R L D</p>
                </div>`,
        world: `<div class="z-view world earth">Hi from inside the O</div>`
      }
    })
    app.init()
  </script>
</body>
</html>

How it works

• The canvas is the element with class zumly-canvas. It fills its nearest positioned ancestor, here .stage, so that ancestor needs a height.
• Views are the screens. views maps a name to its HTML, and the root of each view has class z-view. Each view sets its own size: hello fills the canvas, world is a 320 px circle. The trigger has the same shape, a small Earth, so the new view grows exactly out of it.
• A trigger is any element with class="zoom-me" and data-to="name". Clicking it scales the current view until the trigger covers the new one, so the new view seems to grow out of it.
• initialView is the first view, and app.init() renders it.

Install

The example loads Zumly from a CDN, so you can save it as a file and open it. With a bundler:

npm install zumly

import Zumly from 'zumly'
import 'zumly/style.css'

Keep the browser console open while you build. Zumly explains its mistakes there: a data-to that names no view, an option with a typo, or a canvas with no height.