timesheets.js

A declarative approach for HTML Timing using SMIL Timesheets

The goal of this project is to rely on declarative W3C standards (namely, SMIL Timing and SMIL Timesheets) to synchronize HTML content. These demos rely purely on our Timesheet Scheduler: 100% declarative and standard-based, no specific JavaScript code is used.

Ever wanted to…

  • create your own slideshow in HTML?
  • synchronize HTML content with multimedia streams? (subtitles, transcriptions, annotations…)
  • animate HTML elements?

…without writing any single line of JavaScript?

 

It’s possible. It’s easy.

It’s based on declarative W3C standards.

It works with HTML, SVG and XML.

Discover SMIL Timesheets

with the following demos!

Basic Markup
a simple “Rotating Banner” example to introduce the basic concepts of SMIL time containers
Media Annotations
synchronizing HTML content with a multimedia stream:
rich subtitles, audio annotations, segmented timeline
Slideshow Engine
nesting time containers and relying on declarative user interaction to create a highly flexible slideshow engine

Documentation About

Download Timesheets.js v0.5.0
(JS library + demos, 106kb) fork us on github!

Design interactive presentations.
Sync HTML content with multimedia streams.
100% declarative and standard-based.

Cross-browser. One lightweight JS file (6.9KB), no dependency. MIT license.

We’re focusing on two developments:

Both developments are free and open-source software. We’re still in an early development stage, we’ll publish more code and demos along the way (MIT license).

HTML Markup

Our Timesheet Scheduler is required (less than 10KB for the minified/gzipped version): 

<script type="text/javascript" src="timesheets.js"></script>

Here’s the markup of the slideshow above: 

<div class="highlight" smil:timeContainer="seq" smil:first="restart.click">

  <div id="slide1" smil:timeContainer="par" smil:dur="12s">
    <p> Ever wanted to… </p>
    <ul smil:timeContainer="par">
      <li smil:begin="0:02">
        create your own slideshow in HTML?
      </li>
      <li smil:begin="0:04">
        synchronize HTML content with multimedia streams?
        <small>(subtitles, transcriptions, annotations…)</small>
      </li>
      <li smil:begin="0:06">
        animate HTML elements?
      </li>
    </ul>
    <h2 smil:begin="0:08">
      …without writing any single line of JavaScript?
    </h2>
  </div>

  <div id="slide2" smil:timeContainer="par" smil:dur="12s">
    […] 
  </div>

  <div id="slide3" smil:timeContainer="par">
    <dl smil:timeContainer="par">
      […] 
    </dl>
    <p smil:begin="0:04" class="menu">
      <a href="./docs/">Documentation</a>
      <a href="./about/">About</a>
      <button id="restart">Restart</button>
    </p>
  </div>

</div>

All these smil:* attributes (timeContainer, begin, first) are explained in the next pages. Take the tour!

CSS Transitions

All HTML elements are animated with CSS transitions. Check the related stylesheet if you’re curious.

Firefox users, you’ll need Firefox 4 to see these transitions.
Internet Explorer users, your browser does not support CSS transitions at all.

Note that our SMIL Timesheet implementation still works without CSS transitions — it’s just… not as fancy.