LibGuides: Timeline JS, a free, easy-to-use tool assisting you to tell stories in a timeline format: Home

Timeline JS, an open-source tool for building visually rich interactive timelines

Click on Get the Spreadsheet Template. You will need to log in to your Google account.
By default, the copied Copy of Official TimelineJS3 Template spreadsheet will be saved to your Google Drive root folder. You can rename the spreadsheet and move it to your desired folder if you want.

Don'ts
- Do not make any changes to the column header text and do not delete any columns, or Timeline JS will not work.
- Do not leave any blank rows.
Dos
- You can change the Fill color, Format -> Wrapping.
- You can change data validation rules.
  - The column P with Alt Text has a data validation rule of "Text is a valid URL.', which is wrong. You can remove the rule from P2:P9.
- You can sort the rows using different column headers because TimelineJS automatically orders your slides according to their start date and always puts the title slide first, no matter how the rows in your Google spreadsheet are ordered.
After you make some changes to the Google spreadsheet, you might want to preview the change. There is a noticeable delay between changes in Google Spreadsheet and the preview.
- You can click on the button "Open Preview in a New Window" instead of "Preview" button. This helps.
- Although the Google spreadsheet has been published, you might need to republish the sheet to see the changes in Preview. Refreshing/reloading the Google spreadsheet doesn't work the same way as republishing (i.e. File -> Share -> Publish to Web)

The type column Q has three values: title, era, or blank.

title: Only one spreadsheet row should have a "title" type, which means the Timeline project only has one title slide. The title slide shows before all other slides as the title slide. The spreadsheet row shows a title slide on the timeline.
era: Era is only used to change how the date portion of the timeline looks. The spreadsheet row with the era type will not show a slide on the timeline.
- If you use the type era in this column, then Timeline will use the start and end time in the spreadsheet row to label a span of time in the "axis" area of the timeline.
- Eras should have start and end dates (at least the year for each), no overlapping. The headline of the spreadsheet row is used to label the era. The spreadsheet rows with era type don't need other cells.
blank: Most of the spreadsheet rows are blank for type. The spreadsheet row with the blank type will show a slide on the timeline.
Note: It's recommended your Timeline project doesn't have more than 20 slides. You can see the number of spreadsheet rows you have and the type for each row, to learn the number of slides you will have quickly.

Group helps you organize your events.
You can use any values in the Group column. For instance, our Pele example will use biography and career, family background, Brazil, and club.
Events with the same group name will be put on the same row in the Timeline. The group name will be displayed as a label at the left edge of the row containing those events.

Other than the title slide, you need at least the start year for the event. End dates are optional.
Events with start and end dates will display spans of time on the timeline.
You can use column I to specify a "display date," which will override the automatic Month Day, Year formatting on the slide, and the "Previous" and "Next" button labels.

When adding an image from a webpage, right-click over the image and choose "copy image address", not "copy link address".
To avoid broken link or error code 404 (i.e. missing file), you can download the image, upload it to your own cloud storage such as your Google drive or Box folder. Then file-> share, general access->anyone with the link ->copy link. Put the copied link in the spreadsheet. You will still need to provide media credit and link your media credit to the page you found the image.

If a YouTube video shows "Video unavailable. The channel owner has blocked it from displaying on this website or application. Watch on YouTube." You have to accept it to play on YouTube or find an alternate one that allows you to embed.
If you want to embed a YouTube video with a specific start time, check the Start at timecode box on the Share in a post window, copy the URL, https://youtu.be/Zwkm87aPDUI?si=xE3X_13g8nT8FQnz&t=44, then add an "s" at the end of the URL, paste it to your Google spreadsheet Media field then. So the URL with start time looks like https://youtu.be/Zwkm87aPDUI?si=xE3X_13g8nT8FQnz&t=44s

It is best practice to include media credit for the media you use. The media credit is right justified and often truncated. You can use ZoteroBib, copy your media URL into the ZoterBib Cite input box, let it generate a full bibliography record, and then copy it to the media credit cell.
Caption is left justified.

Media thumbnail should be a link to an image file no larger than 32x32 pixels. It is displayed in front of flags (i.e., the mark labels) in the timeline and replaces the default icons for images and videos. Other sizes are smooshed or stretched, with no control
Alt Text specifies text for screenreaders and other assistive technologies. They should be more descriptive than the Caption.

The slide's background can be set to a specific color or an image. You can enter a CSS hex color value, such as #00205B, or the URL to an image. You can use Google color picker or other online color picker tool.
If you leave the background column blank, the background will be white.