10 Best Timeline Components In jQuery And Pure JS/CSS (2021 Update)

by jQueryScript,

The timeline is a useful visual tool that allows you to tell a story, show history, personal events and any other event related information on the page.

It generates a horizontal or vertical line that shows the time and the order in which events have happened to enhance comprehension.

In this page, you will find out the 10 best open source timeline plugins/components/libraries written in jQuery, native JavaScript, and/or pure CSS. Enjoy!.

Originally Published May 13 2019, updated Mar 01 2021

Table of contents:

jQuery Timeline Plugins:

Easy Horizontal Timeline Generator With jQuery - Timeline.js

Timeline.js is a jQuery timeline generator which helps you render horizontal, scrolling, responsive bar & point/line style timelines (with event details) from dynamic data arrays/objects.

Easy Horizontal Timeline Generator With jQuery - Timeline.js

[Demo] [Download]


Dynamic Animated Timeline Slider With jQuery - Roadmap

Yet another timeline slider plugin with jQuery that dynamically displays events in a responsive, scrollable, horizontal/vertical slider with a subtle fadeIn animation.

Dynamic Animated Timeline Slider With jQuery - Roadmap

[Demo] [Download]


Interactive Timeline Slider In jQuery - Horizontal Timeline

A dynamic, interactive, responsive, touch-friendly, SEO-friendly timeline that makes it possible to displays event data in a horizontal slider interface.

Interactive Timeline Slider In jQuery - Horizontal Timeline

[Demo] [Download]


Responsive Horizontal/Vertical Timeline Plugin For jQuery

A responsive, flexible, animated, scrollable and high-performance jQuery (Vanilla JavaScript) timeline plugin that automatically switches between horizontal and vertical layouts depending on the current screen size.

Responsive Horizontal/Vertical Timeline Plugin For jQuery

[Demo] [Download]


Scrolling Timeline Plugin With jQuery And Bootstrap 4- Vertical Timeline

A lightweight and configurable jQuery timeline plugin which displays a sequence of events in a responsive, vertical timeline interface styling with Bootstrap 4 framework.

Scrolling Timeline Plugin With jQuery And Bootstrap 4- Vertical Timeline

[Demo] [Download]


Vanilla JS Timeline Libraries:

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

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

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

[Demo] [Download]


Simple Scrollable Timeline Chart With D3.js – d3-timeline

d3-timeline is a pure JavaScript library for rendering a scrollable and scalable timeline chart using d3.js library.

Simple Scrollable Timeline Chart With D3.js – d3-timeline

[Demo] [Download]


Responsive Animated Timeline With JavaScript And CSS3

This is a simple, responsive timeline where the event nodes will slide smoothly into the screen on vertical page scrolling.

Responsive Animated Timeline With JavaScript And CSS3

[Demo] [Download]


Pure CSS Timeline Components:

Responsive Vertical Timeline In Pure CSS

A simple, plain, responsive, vertical timeline built with CSS and HTML unordered list.

Responsive Vertical Timeline In Pure CSS

[Demo] [Download]


Minimalist Vertical Timeline With Pure CSS – Timelined

Timelined is a simple yet robust and highly customizable CSS library for generating a vertical, fully responsive timeline from plain html structure.

Responsive Animated Timeline With JavaScript And CSS3

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome timelines on the web & mobile? Check out the jQuery Timeline and JS/CSS Timeline sections.