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-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>

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,
    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>

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)

FredGainza/timeline

Timeline

Usage

Configuration options

Examples

Horizontal timeline

Vertical timeline

Upcoming development