Building Interactive Timelines in TimeKitJS

When using TimeKitJS-enhanced videos on your site, you may want to include an element that tracks progress throughout the length of the video. This may take the form of a completion bar, an event timeline, a text transcript, or other chronological indicator. Whatever your content may be, keeping in sync with your video is easy with TimeKitJS' percentage-based timestamps. Simply add a data-tk-0 attribute to your element to set styles at the beginning of your video, and a data-tk-100 to set styles at the end of your video. TimeKitJS will do the rest to translate smoothly between the two states.

var tk = new TimeKit('#video');

<div class="tk-canvas">
    <video id="video" controls loop>
        <source src="goldfish.mp4" type="video/mp4">
        <source src="goldfish.webm" type="video/webm">
        Sorry, your browser doesn't support HTML5 video.
    </video>
    <div id="timeline">
        <ul id="frames" data-tk-0="left:352px" data-tk-100="left:-1880px;">
            <li><img src="frame01.jpg" /></li>
            <li><img src="frame02.jpg" /></li>
            <li><img src="frame03.jpg" /></li>
            <li><img src="frame04.jpg" /></li>
            <li><img src="frame05.jpg" /></li>
            <li><img src="frame06.jpg" /></li>
            <li><img src="frame07.jpg" /></li>
            <li><img src="frame08.jpg" /></li>
            <li><img src="frame09.jpg" /></li>
            <li><img src="frame10.jpg" /></li>
            <li><img src="frame11.jpg" /></li>
            <li><img src="frame12.jpg" /></li>
            <li><img src="frame13.jpg" /></li>
        </ul>
    </div>
</div>

.tk-canvas {
.tk-canvas {
    overflow: hidden;
    padding-bottom: 100px;
    position: relative;
}
#timeline {
    background: #333;
    bottom: 0px;
    padding: 5px 0px;
    position: absolute;
}
#timeline:after {
    content: "";
    border-bottom: 15px solid red;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    bottom: 0px;
    left: 50%;
    margin-left: -15px;
    position: absolute;
}
#timeline ul {
    left: 352px;
    list-style: none outside;
    margin: 0;
    padding: 0;
    position: relative;
    white-space: nowrap;
}
#timeline li {
    display: inline;
    margin: 0;
    padding: 0;
}