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
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();
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-mode="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>
rtlMode
When using the timeline in horizontal mode, this defines whether the timeline should start from the right. This overrides the startIndex setting.
JavaScript/jQuery
default: false
options: true / false
Data attribute
<div class="timeline" data-rtl-mode="true"> ... </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>
With 4 items visible in the viewport and changes into vertical mode at a 800px breakpoint
JavaScript
timeline(document.querySelectorAll('.timeline'), {
mode: 'horizontal',
visibleItems: 4,
forceVerticalMode: 800
});
jQuery
jQuery('.timeline').timeline({
mode: 'horizontal',
visibleItems: 4,
forceVerticalMode: 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>
With the first item aligned to the right and the elements set to come into view 150px from the bottom of the window
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>
- 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)