TimelineJS: Easy and Elegant

Earlier this week I wrote an article about ThingLink, an online tool that creates a story inside one image using rich media. While I’m on the subject of using story for instruction, I want to mention another online tool I discovered a few months ago that is easy to use, incredibly versatile, and quite elegant in appearance: TimelineJS.

Screen from TimelineJS example
Slide from TimelineJS example

TimelineJS is just that: a timeline tool. You’ve possibly seen plenty of other online timelines (popular ones for education purposes include TimeToast and Dipity), and they all tend to have some great features. However, to me, the appearance of TimelineJS is by far the most sophisticated and professional—significant for higher education courses.

Besides the overall beauty of the tool, TimelineJS has a couple of great features:

  1. TimelineJS can be developed in two (soon, three) different formats. JavaScript Object Notation, or JSON, is the native data format for TimelineJS—so, if you can do JSON scripting, you will probably enjoy developing your timeline with JSON. However, if you are not a scripting wizard, never fear: you may elect instead to create your timeline in a Google Docs spreadsheet (the TimelineJS website provides a template) and then use TimelineJS’s embed generator to produce code for placing the timeline on your webpage (yes, the timeline can be embedded in the Blackboard LMS, if you’re a Blackboard user). A third, upcoming format for developing TimelineJS is Storify, though little information is available for this on the website.
  2. TimelineJS supports numerous rich media, including “Twitter, Flickr, Google Maps, YouTube, Vimeo, Dailymotion, Wikipedia, SoundCloud and more media types in the future,” according to the TimelineJS website.

Other features of this tool include the ability to resize the timeline for the webpage, a variety of available fonts, and starting the timeline at a particular “slide.” The TimelineJS website provides plenty of examples of timelines created by others, and an FAQ page can be of great help.

Given the ease of use (with Google Docs) and the support of so many well-known rich media, I can see this tool being used by an instructor as a presentation material and by students as a constructivist-based activity or assessment. What a great collaborative project this could be!

How have I used TimelineJS? At the moment, I’ve used it to create a prototype for an instructor of African-American studies. She had created a document listing events related to slavery and the years they occurred. I used that document to re-create the event timeline in TimelineJS (using the Google Docs method), which you can view at http://www.jenperkins.com/timeline_example.html. You tell me: would you learn more by memorizing events and years from a Word document or by viewing this timeline and its associated images, videos, and the like? My guess is the latter. Story is key.

Leave a Reply

Your email address will not be published. Required fields are marked *