I recently learned about TimelineJS, which is an open-source JavaScript-based tool that enables anyone to build visually rich, interactive timelines. Beginners like me can create a timeline using a Google Sheets template, while experts can use JSON to create custom installations.
Since I’m creating a thematic research collection about Clemson men in World War II, I decided to build a timeline of major events of the war. TimelineJS recommends not having more than 20 slides for a reader to click through. This was difficult for me because there are so many important events that took place during WWII. I could easily have made 30+ slides. But I realize that not everyone is as passionate about the topic as I am. So I had to make decisions about which events were essential and in some cases I combined multiple events into one campaign. I also made the difficult decision to exclude the Holocaust from the timeline, even though it was connected with the military conflict, because I had to keep my narrative tight. I ended up with 19 slides total.
While the selection of events was sometimes a frustrating process, as I hated to leave out parts of the story, it forced me to really think about what someone needs to know to get an overview of the conflict. By having to combine events, I also realized how few events were really discrete. Most were interconnected and often overlapped each other. In studying WWII, we tend to isolate the different theaters, but in reality many battles in Europe were taking place at the same time as those in the Pacific, and even some battles within the same theater were concurrent. A timeline with overlapping events can help you get a sense of the global nature of the war. For my specific project, this timeline can provide a quick reference to help me contextualize my archival items.
The great thing about TimelineJS is its simplicity. It’s easy to fill out the Google Sheets template with your information, publish it, and embed it on your website. Of course that ease comes with familiarity, and it may seem daunting at first to someone who doesn’t have a lot of experience with Google documents or embedding. That’s why it’s best to watch the introductory video and follow a tutorial like this one by Lindsey Passenger Wieck. If you’re not one to read the instructions first, you’ll quickly get lost.
One of the features I like is the media component. TimelineJS can pull in media from a variety of sources, including Twitter, Flickr, YouTube, Vimeo, and SoundCloud. You just need to paste the link in the appropriate cell in the spreadsheet, which has a column to display media on the left-hand side of the slide and a column to give the slide a background image (or color). The media can really spice up your timeline. For example, I added a video of President Franklin D. Roosevelt’s “Day of Infamy” speech for the Pearl Harbor slide, and an audio clip of Prime Minister Winston Churchill’s “Finest Hour” speech for the Battle of Britain slide. The background images also make the slides more visually engaging.
Unfortunately, Google Sheets has a strange tendency to reject your media links as invalid URLs, so that TimelineJS will not display the media in the slides. I haven’t figured out why it does this or even how to fix it, but I fiddled with my links, sometimes trimming off parts of the URLs or searching for alternate links, until they displayed properly.
For me, the biggest caveat to TimelineJS is the inability to see changes in real time. At first I kept pasting my Google Sheets URL into the “Make a Timeline” section on the TimelineJS website. However, this was time-consuming. So I decided to go ahead and embed the timeline in this post, save the draft, and refresh the preview to view the changes. It was still time-consuming, especially when the server kept caching the previous version, but at least I didn’t have to paste in my URL each time. Maybe this wouldn’t matter if you create your entire timeline before publishing it, but I don’t work that way. I need to check the output periodically to make sure I haven’t made a mistake or Google hasn’t rejected my media link.
I also don’t like the fact that the Google Sheets template, which is saved in your Google Drive account, is separate from the TimelineJS website. It’s not an issue to have the JavaScript itself on the Knight Lab server; in fact, it’s often better than having a local copy because this way you’ll always have the latest version of the code. But it would be nice to have the template and the front-end timeline in one place. I’m not sure that this can be solved by integrating the timeline into your website using JavaScript or using the WordPress plugin because you’re still loading values from Google Sheets. Maybe that’s where JSON comes in? I learned a little about JSON a few years ago but don’t use it regularly. I’ll have to investigate.
Anyway, without further ado, here is my WWII timeline: