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: 10,
  })
  v.updateTimeline([{
      id: 'abc',
      layer: 'L1',
      enable: {
        start: '0',
        duration: '10'
      },
      content: {}
    },
    {
      id: 'cde',
      layer: 'L1',
      enable: {
        start: '#abc.end + 5', // Start 5 seconds after #abc ends
        duration: '#abc.duration' // Have the same duration as #abc
      },
      content: {}
    },

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