TimelineJS, Make Timeline of Your or Company History in Minutes

Timeline JS, Beautifully crafted timelines that are easy and intuitive to use.

TimelineJS is a javascript library that help to make a awesome and beautiful timeline in a minute. TimelineJS support rich media such as photo, Youtube, Video, SoundCloud, You can impot them easily on your Timeline. TimelineJS can be built by Google spreadsheet or detailed JSON.

Let’s see the sample code:

  1. create your own spreadsheet first by following this template.
  2. use below code, that’s it!

Sample Code

<div id="timeline-embed"></div>
<script type="text/javascript">
var timeline_config = {
    width:              '100%',
    height:             '600',
    source:             'path_to_json/or_link_to_googlespreadsheet',
    embed_id:           'timeline-embed',               //OPTIONAL USE A DIFFERENT DIV ID FOR EMBED
    start_at_end:       false,                          //OPTIONAL START AT LATEST DATE
    start_at_slide:     '4',                            //OPTIONAL START AT SPECIFIC SLIDE
    start_zoom_adjust:  '3',                            //OPTIONAL TWEAK THE DEFAULT ZOOM LEVEL
    hash_bookmark:      true,                           //OPTIONAL LOCATION BAR HASHES
    font:               'Bevan-PotanoSans',             //OPTIONAL FONT
    debug:              true,                           //OPTIONAL DEBUG TO CONSOLE
    lang:               'fr',                           //OPTIONAL LANGUAGE
    maptype:            'watercolor',                   //OPTIONAL MAP STYLE
    css:                'path_to_css/timeline.css',     //OPTIONAL PATH TO CSS
    js:                 'path_to_js/timeline-min.js'    //OPTIONAL PATH TO JS
<script type="text/javascript" src="path_to_js/storyjs-embed.js"></script>  


Still feel difficult? You can make a Timeline for yourself even you don’t know programming. TimelineJS can has a Tool that help us to use Google Spreadsheet to generate the awesome timeline.

Check it out


We will send you a newsletter weekly, includes Coder Read, weekly resources summary, library / application updates & some freebies.

Related Articles