10 Best Timeline Components In jQuery And Pure JS/CSS

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

Table of contents:

jQuery Timeline Plugins:

Simple jQuery Timeline Plugin - Timelinr

Timelinr is a simple jQuery Timeline Plugin that makes it easy to create awesome timeline effects for your website.

Simple jQuery Timeline Plugin - Timelinr

[Demo] [Download]


Create A Responsive & Animated Vertical Timeline with jQuery and CSS3

A cool, responsive, animated timeline built with jQuery and CSS3 that shows & animates event blocks when they're scrolled into the viewport.

Create A Responsive & Animated Vertical Timeline with jQuery and CSS3

[Demo] [Download]


Touch-enabled jQuery Timeline Plugin with 3D Flipping Effects - Timecube

Timecube is a fancy jQuery timeline plugin that allows you to navigation through JSON based events by mouse or touch swipe in an animated 3D cube interface based on CSS3 perspective, transition and transform properties.

Touch-enabled jQuery Timeline Plugin with 3D Flipping Effects - Timecube

[Demo] [Download]


Responsive Vertical Timeline With jQuery and CSS3

An extremely lightweight jQuery plugin which lets you create a responsive, animated, vertical timeline widget with plain Html markups.

Responsive Vertical Timeline With jQuery and CSS3

[Demo] [Download]


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]


Vanilla JS Timeline Libraries:

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]


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]


Pure CSS Timeline Components:

Responsive Flat Style Timeline with Pure CSS/CSS3

A responsive, flexible, flat styled timeline built using pure CSS and CSS3 transitions & media queries. Works perfectly on PC and mobile devices.

Responsive Flat Style Timeline with Pure CSS/CSS3

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