Timeline

A vanilla JavaScript horizontal / vertical timeline.

Horizontal timeline demo | Vertical timeline demo

• Responsive
• Configure settings using the API or through data attributes
• Built with performance in mind
• Small file size
• Library agnostic. If jQuery is present it will register itself as a plugin
• Written in ES6 and transpiled into ES5 via Babel
  
  

Usage

Link the required files

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

HTML markup

<div class="timeline">     <div class="timeline__wrap">         <div class="timeline__items">             <div class="timeline__item">                 <div class="timeline__content">                     Content / markup here                 </div>             </div>             <div class="timeline__item">                 <div class="timeline__content">                     Content / markup here                 </div>             </div>             <div class="timeline__item">                 <div class="timeline__content">                     Content / markup here                 </div>             </div>             <div class="timeline__item">                 <div class="timeline__content">                     Content / markup here                 </div>             </div>             <div class="timeline__item">                 <div class="timeline__content">                     Content / markup here                 </div>             </div>         </div>     </div> </div>

Initialize the plugin

JavaScript

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

jQuery

jQuery('.timeline').timeline();

Configuration options

Using data attributes will take priority over settings via the API.

mode

Choose whether the timeline should be vertical or horizontal

JavaScript/jQuery

default: 'vertical' options: 'vertical', 'horizontal' 

Data attribute

<div class="timeline" data-mode="horizontal">     ... </div>

forceVerticalMode

When using the timeline in horizontal mode, define at which viewport width it should revert to vertical mode

JavaScript/jQuery

default: 600 options: integer 

Data attribute

<div class="timeline" data-force-vertical-width="600">     ... </div>

horizontalStartPosition

When using the timeline in horizontal mode, define the vertical alignment of the first item

JavaScript/jQuery

default: 'top' options: 'bottom', 'top' 

Data attribute

<div class="timeline" data-horizontal-start-position="top">     ... </div>

moveItems

When using the timeline in horizontal mode, define how many items to move when clicking a navigation button

JavaScript/jQuery

default: 1 options: integer 

Data attribute

<div class="timeline" data-move-items="1">     ... </div>

startIndex

When using the timeline in horizontal mode, define which item the timeline should start at

JavaScript/jQuery

default: 0 options: integer 

Data attribute

<div class="timeline" data-start-index="0">     ... </div>

verticalStartPosition

When using the timeline in vertical mode, define the alignment of the first item

JavaScript/jQuery

default: 'left' options: 'left', 'right' 

Data attribute

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

verticalTrigger

When using the timeline in vertical mode, define the distance from the bottom of the screen, in percent or pixels, that the items slide into view

JavaScript/jQuery

default: '15%' options: percentage or pixel value e.g. '20%' or '150px' 

Data attribute

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

visibleItems

If using the timeline in horizontal mode, define how many items are visible in the viewport

JavaScript/jQuery

default: 3 options: integer 

Data attribute

<div class="timeline" data-visible-items="3">     ... </div>

Examples

Horizontal timeline

With 4 items visible in the viewport and changes into vertical mode at a 800px breakpoint

See demo

JavaScript

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

jQuery

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

Data attributes

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

And

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

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

See demo

JavaScript

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

jQuery

jQuery('.timeline').timeline({     verticalStartPosition: 'right',     verticalTrigger: '150px' });

Data attributes

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

And

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

Upcoming development

• Ability to choose how many items are visible at user defined breakpoints when using the timeline in horizontal mode
• Ability to set how many items slide at a time when navigating through the horizontal timeline
• Ability to set trigger distance from the top of the page in vertical mode
• Add a horizontal start position option
• Generate a tab menu to navigate to specific items
• Ability to change classes for the HTML elements
• Add various animation options for the vertical timeline (e.g. slide up/slide in/fade in)