Vanilla Timeline Quick Start Guide

Here is some code you can use to get started quickly.

Use the CDN links shown below to use Vanilla Timeline without installing code to your server.

(If you are a developer, or prefer not to use CDN links, you can link to files in the dist directory for offline or local access.)

CDN Links:

Add CSS styles to your document <head>


Add Javascript functions before your closing <body> tag

1. Creating a bare bones minimalist HTML timeline

Preview:
Bare Bones HTML Timeline

This is the simplest timeline that you can create with Vanilla Timeline. The content is freeform HTML and you can add whatever you want without any type requirements. The look of the bare bones timeline is entirely up to you. The app will allow you to add code which breaks the layout. The bare bones HTML timeline is limited in features compared to other types of Vanilla Timelines. It will display dates and a small amount of text in a horizonal or vertical timeline. When a viewer clicks on the timeline node, it will open a modal window. Adding large-sized elements (e.g. images) or big blocks of text will break the layout and/or styling. For best results, try to keep your content simple and basic. Just copy/paste this HTML into your page:


<div class="timeline" data-mode="horizontal">
  <div class="timeline__wrap">
    <div class="timeline__items">

        <!-- node 1 -->
        <div class="timeline__item">
            <div class="timeline__content">
                <h5>Jan. 1, 2000</h5>
                <p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
            </div>
        </div>

        <!-- node 2 -->
        <div class="timeline__item">
            <div class="timeline__content">
                <h5>Dec. 31, 2000</h5>
                <p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
            </div>
        </div>
        
        <!-- node 3 -->
        <div class="timeline__item">
            <div class="timeline__content">
                <h5>Jan. 1, 2001</h5>
                <p>Lorem ipsum dolor sit amet, qui minim labore adipisicing minim sint cillum sint consectetur cupidatat.</p>
            </div>
        </div>

    </div>
  </div>
</div>

This example page shows both Horizontal and Vertical bare bones HTML timelines:

You can view the source code of the example page to see how it was created. After you add the bare bones HTML to your document, jump ahead to Step 3 to learn how to initialize the timeline.

Note: If you need to add big images, large amounts of text, or video —and you want it to be styled properly— read on to learn about other Vanilla Timeline methods.

2. Creating a structured HTML timeline

If you're using the bare bones HTML method from above, you can skip ahead to Step 3. But, if you want more advanced styling and layout, you should consider using the structured HTML method for adding nodes instead. The structured HTML timeline uses CSS classes to provide a structure for different types of data. You have to add your data to the correct fields for it to function properly but, it's easy to understand. The advantage to using this method is that it helps Vanilla Timeline understand the type of content you're adding and it can format the timeline correctly when rendering (based on type). Copy/paste the HTML below into your page to create a structured HTML timeline. After you're finished copying/pasting the HTML, there's one final step: you have to initialize the timeline(s). Jump down to Step 3 to learn how to do this.

Note: Notice that we skip some of the data in the structured HTML. In those fields, we just added HTML comments. All fields are required, but you don't have to add data. The minimal data that you need: date and heading.


<div class="timeline" data-mode="horizontal">
  <div class="timeline__wrap">
    <div class="timeline__items">

      <!-- Node: 1 -->
      <div class="timeline__item">
        <div class="timeline__content">
          <div class="timeline__date">
            Jan. 2, 1987
          </div>
          <img class="timeline__image" src="/path/to/your/image-1.jpg" alt="">
          <h3 class="timeline__heading">Node 1 Heading</h3>
          <div class="timeline__summary">
            <!-- short, text-only summary goes here -->
          </div>
        </div>
        <div class="timeline__modal-content">
          <!-- full description of event goes here (HTML is OK here) -->
        </div>
      </div>

      <!-- Node: 2 -->
      <div class="timeline__item">
        <div class="timeline__content">
          <div class="timeline__date">
            Jan. 5, 1987
          </div>
          <img class="timeline__image" src="/path/to/your/image-2.jpg" alt="">
          <h3 class="timeline__heading">Node 2 Heading</h3>
          <div class="timeline__summary">
            <!-- short, text-only summary goes here -->
          </div>
        </div>
        <div class="timeline__modal-content">
          <!-- full description of event goes here (HTML is OK here) -->
        </div>
      </div>

      <!-- Node: 3 -->
      <div class="timeline__item">
        <div class="timeline__content">
          <div class="timeline__date">
            Jan. 21, 1987
          </div>
          <img class="timeline__image" src="/path/to/your/image-3.jpg" alt="">
          <h3 class="timeline__heading">Node 3 Heading</h3>
          <div class="timeline__summary">
            <!-- short, text-only summary goes here -->
          </div>
        </div>
        <div class="timeline__modal-content">
          <!-- full description of event goes here (HTML is OK here) -->
        </div>
      </div>

    </div>
  </div>
</div>

Structured HTML Timeline Example:

Here is what your structured HTML timeline will look like on the page.

Jan. 2, 1987

Node 1 Heading

Jan. 5, 1987

Node 2 Heading

Jan. 21, 1987

Node 3 Heading

Feb. 1, 1987

Node 4 Heading

Feb. 12, 1987

Node 5 Heading

Feb. 15, 1987

Node 6 Heading

Feb. 20, 1987

Node 7 Heading

Feb. 28, 1987

Node 8 Heading

Mar. 4, 1987

Node 9 Heading

Note: the outer container with black border and sample images were added for the demo. These will not appear on your timeline.
We are also passing data attributes to customize the layout. The default timeline does not look like this.

3. Initialize Vanilla Timeline with one line of Javascript

After adding CDN links to styles and functions in your document and adding node data, you have to initialize the Vanilla Timeline(s) on the page. This is what actually triggers the Javascript library to render the timeline to the page. It searches for all elements on your page with the class name timeline and renders it using your node data.


  <!-- Load CDN timeline functions -->
  <script src="https://cdn.jsdelivr.net/npm/@kendawson-online/vantl@latest/dist/timeline.min.js"></script>
  <script>
    // initialize all timelines on the page
    timeline(document.querySelectorAll('.timeline'));
  </script>

</body>
</html>

Save your changes and reload the page to see your new timeline!

Now that you know the basics of how to create Vanilla Timelines, continue to learn about all the options you can use to customize your timeline.