Responsive Horizontal/Vertical Timeline In Vanilla JavaScript – timeline.js

Preview:

Description:

timeline.js is a vanilla JavaScript plugin to render a responsive, horizontal/vertical timeline component from plain HTML.

Note: the component also can be implemented as a jQuery plugin, See Responsive Horizontal/Vertical Timeline Plugin For jQuery.

How to use it:

Place the timeline.js’ files into the html document.

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

The required HTML for the timeline.

<div class="timeline">
  <div class="timeline__wrap">
    <div class="timeline__items">
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2018.3</h2>
          <p>Story 1</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2017.5</h2>
          <p>Story 2</p>
        </div>
      </div>
      <div class="timeline__item">
        <div class="timeline__content">
          <h2>2016</h2>
          <p>Story 3</p>
        </div>
      </div>
      ...
    </div>
  </div>
</div>

Initialize the timeline.js and done.

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

By default, the plugin will render a vertical timeline on the page. To change the mode to ‘horizontal’, follow this step.

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal'
});

If you’re using the horizontal mode, the timeline will automatically switch to ‘Vertical’ mode when the screen size is too small to fit the timeline. To change the default breakpoint, follow this step:

timelineApp(document.querySelectorAll('.timeline'), {
  mode: 'horizontal',
  forceVerticalWidth: 800
});

You can also specify how many items to display at a time.

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

Choose the alignment of the first item.

timelineApp(document.querySelectorAll('.timeline'), {
  verticalStartPosition: 'left' // or right
  horizontalStartPosition:: 'top' // or left
});

Enable/disable RTL mode.

timelineApp(document.querySelectorAll('.timeline'), {
  rtlMode: true
});

Set the start index. Default: 0 (item 1).

timelineApp(document.querySelectorAll('.timeline'), {
  startIndex: 0
});

Define the distance from the bottom of the screen, in percent or pixels, that the items slide into view. Only available in ‘Vertical’ mode.

timelineApp(document.querySelectorAll('.timeline'), {
  verticalTrigger: '15%'
});

Determine how many items to move when clicking a navigation button in ‘Horizontal’ mode.

timelineApp(document.querySelectorAll('.timeline'), {
  moveItems: 1
});

You can also config the timeline via the following data attributes when you have multiple instances on the page.

<div class="timeline" data-option-name="value">
  ...
</div>

Changelog:

02/12/2020

• Add RTL config option

11/05/2018

• Fixed: Error when there is less nodes to fill timeline visible area