10 Best Timeline Components In jQuery And Pure JS/CSS (2024 Update)
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 Jan 23 2024
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.
Dynamic Animated Timeline Slider With jQuery - Roadmap
A timeline slider plugin with jQuery that dynamically displays events in a responsive, scrollable, horizontal/vertical slider with a subtle fadeIn animation.
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.
Interactive Timeline Slider In jQuery - Horizontal Timeline
A jQuery plugin to create a dynamic, interactive, responsive, touch-friendly, SEO-friendly timeline that makes it possible to displays event data in a horizontal slider interface.
Horizontal Scrollable Timeline Plugin - jTimeline
A tiny, responsive, SEO-friendly jQuery timeline plugin that generates a horizontal scrollable timeline from an HTML unordered list.
Vanilla JS Timeline Libraries:
Parallel Timelines Chart With JavaScript And SVG
A JavaScript & SVG based charting library to create a Gantt Chart style segmented timelines for representing the state of time-series over time.
Responsive Horizontal/Vertical Timeline In Vanilla JavaScript – timeline.js
A vanilla JavaScript plugin to render a responsive, horizontal/vertical timeline component from plain HTML.
Responsive Interactive Timeline In Vanilla JavaScript – Simple Timeline
A simple, responsive, interactive timeline implemented in pure JavaScript.
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 CSS/SASS
Yet another responsive, nice-looking, and vertical timeline UI built on top of pure CSS/SASS.
Conclusion:
Looking for more jQuery plugins or JavaScript libraries to create awesome timelines on the web & mobile? Check out the jQuery Timeline and JS/CSS Timeline sections.
