Timeline

A vanilla JavaScript horizontal / vertical timeline component

Star

Getting started

1. Include the plugin JavaScript file above the closing </body> tag on your page

<script src="dist/js/timeline.min.js"></script>

2. Include the plugin CSS file in the <head> section of your page

<link href="dist/css/timeline.min.css" rel="stylesheet" />

3. Add your HTML markup

<div class="timeline">
  <div class="timeline__wrap">
    <div class="timeline__items">
      <div class="timeline__item">
        <div class="timeline__content">
          Your content / markup
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          Your content / markup
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          Your content / markup
        </div>
      </div>
    </div>
  </div>
</div>

4. Initialize the plugin

With JavaScript

timeline(document.querySelectorAll('.timeline'));

Or with jQuery if you have the jQuery library loaded

$('.timeline').timeline();

Horizontal timeline demo

A horizontal timeline with 4 visible items, which changes to the vertical mode at an 800px resolution.

2018

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2015

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2014

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2012

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2010

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2007

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2004

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2002

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

Initialize the plugin using one of the following:

timeline(document.querySelectorAll('.timeline'), {
  forceVerticalMode: 800,
  mode: 'horizontal',
  visibleItems: 4
});
$('.timeline').timeline({
  forceVerticalMode: 800,
  mode: 'horizontal',
  visibleItems: 4
});
timeline(document.querySelectorAll('.timeline'));

Or

$('.timeline').timeline();

And

<div class="timeline" data-mode="horizontal" data-force-vertical-mode="800" visible-items="4">
  ...
</div>

Vertical timeline demo

A vertical timeline with the first item aligned to the right and the elements set to come into view 150px from the bottom of the window

2018

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2015

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2014

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2012

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2010

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

2007

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2004

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus.

2002

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim neque condimentum lacus dapibus. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Initialize the plugin using one of the following:

timeline(document.querySelectorAll('.timeline'), {
  verticalStartPosition: 'right',
  verticalTrigger: '150px'
});
$('.timeline').timeline({
  verticalStartPosition: 'right',
  verticalTrigger: '150px'
});
timeline(document.querySelectorAll('.timeline'));

Or

$('.timeline').timeline();

And

<div class="timeline" data-vertical-start-position="right" data-vertical-trigger="150px">
  ...
</div>