Timeline example

by Johan Nyman

HTML

<script src="https://cdn.jsdelivr.net/gh/SuperFlyTV/timeline-visualizer@dist/dist/js/timeline-visualizer.min.js"></script>
<canvas width="500" height=300 id="timeline"></canvas>
<div id="message"></div>

CSS

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
  color: #fff;
}

JavaScript

try {
  var v = new TimelineVisualizer.TimelineVisualizer('timeline', {})
  v.setViewPort({
    zoom: 50,
  })
  v.updateTimeline([{

      id: 'abc',
      layer: 'L1',
      enable: {
        start: 10,
        end: 100
      },
      content: {},
    },
    {
      id: 'B',
      layer: 'L2',
      enable: {
        start: '#abc.start + #abc.duration / 2', // Start halfway in
      },
      content: {},
    }

  ])
} catch (e) {
  document.querySelector("#message").innerHTML = e
}