Timeline

Setup

To set up, here is the code

import {startup, Timeline} from 'js/mediaviewer.js';
startup(); //Loads up the library

/**
 * Versatile timeline component (vertical or horizontal) with optional alternating layout
 * and theming via CSS variables.
 *
 * @constructor
 * @param {string|HTMLElement} container
 *        Root element or CSS selector that will host the timeline.
 * @param {{
 *   orientation?: 'vertical'|'horizontal',
 *   alternate?: boolean,
 *   invert?: boolean,
 *   items?: Array<{
 *     date?: string,
 *     title?: string,
 *     html?: string,
 *     icon?: string,
 *     badge?: string,
 *     href?: string
 *   }>
 * }} [config]
 *        Behavioral options. When `items` is omitted/empty, the component
 *        will parse child markup (`<timeline-item>`, `<li>`, or `.timeline-item`)
 *        to build entries.
 *
 * @param {{
 *   'track-color'?: string,
 *   'connector-width'?: string,
 *   'node-bg'?: string,
 *   'node-border'?: string,
 *   'node-size'?: string,
 *   'node-shadow'?: string,
 *   'gutter'?: string,
 *   'spacing'?: string,
 *   'max-w'?: string|number,
 *   'card-bg'?: string,
 *   'card-color'?: string,
 *   'card-radius'?: string,
 *   'card-shadow'?: string,
 *   'card-padding'?: string,
 *   'date-color'?: string,
 *   'title-color'?: string,
 *   'accent'?: string,
 *   'icon-color'?: string,
 *   'badge-bg'?: string,
 *   'badge-color'?: string,
 *   'inview-duration'?: string
 * }} [styles]
 *        **CSS mapping**; each key maps to a `--timeline-*` custom property
 *        (e.g., `{ 'track-color': '#d9dde3' }` → `--timeline-track-color: #d9dde3`).
 *
 *
 * @example
 * new Timelines('#history', {
 *   orientation: 'vertical',
 *   alternate: true,
 *   items: [
 *     { date: '2024', title: 'Launched', html: '<p>First release</p>', icon: 'fa-solid fa-rocket', badge: 'v1' },
 *     { date: '2025', title: 'Milestone', html: '<p>Shipped timelines</p>' }
 *   ]
 * }, {
 *   'track-color': '#d9dde3',
 *   'node-border': '#4badde',
 *   'card-bg': '#ffffff'
 * });
 */
new Timeline('.demo', {
// configurations
},
{
// CSS Before and After variables
});

Configurations

Label	Type	Values	Default	Description	Required
orientation	string	vertical, horizontal	'vertical'	Sets the orientation of the timeline	✖️
alternate	boolean	true, false	true	Have an alternate positions	✖️
invert	boolean	true, false	false	Invert the alternate positions	✖️
items	object[]	{date: string, title: string, html: string, icon: string, badge: string, href: string}	[]	Events that go into the timeline	✔️

Styles

Variable	Name	Values	Default	Description
--timeline-track-color	track-color	color	#d9dde3	Changes the track color
--timeline-connector-width	connector-width	size	2px	connector width
--timeline-node-bg	node-bg	color	#ffffff	Node background
--timeline-node-border	node-border	color	#4badde	Node border
--timeline-node-size	node-size	size	14px	Node size
--timeline-node-shadow	node-shadow	shadow	0 2px 6px rgba(0,0,0,.08)	Node shadow
--timeline-gutter	gutter	size	24px	Spacing from track to card
--timeline-spacing	spacing	size	28px	Spacing between each card
--timeline-max-w	max-w	size	900px	Maximum width
--timeline-card-bg	card-bg	color	#ffffff	Card background
--timeline-card-color	card-color	color	#0b0f14	Card colors
--timeline-card-radius	card-radius	size	10px	Card border radius
--timeline-card-shadow	card-shadow	shadow	0 6px 16px rgba(0,0,0,.08)	Card shadow
--timeline-card-padding	card-padding	size	14px 16px	Card paddings
--timeline-date-color	date-color	color	#6a7683	Date color
--timeline-title-color	title-color	color	#0b0f14	Title color
--timeline-accent	accent	color	#4badde	Accent color
--timeline-icon-color	icon-color	color	#4badde	Icon color
--timeline-badge-bg	badge-bg	color	#e9f6fc	Badge background color
--timeline-badge-color	badge-color	color	#085b78	Badge color
--timeline-inview-duration	inview-duration	time	.44s	Inview animation time

HTML

To operate in HTML, use the following code

<!--Replace ... with any of the valid configurations-->
<div media-timeline ...>
      <timeline-item
        data-date="..."
        data-title="..."
        data-badge="..."
        data-icon="..."
      >
        ...
      </timeline-item>

      <!-- You can also use plain <li> or any element with .timeline-item -->
      <li class="timeline-item" data-date="..." data-title="..." data-icon="...">
        ...
      </li>
    </div>
<script src="autoloader.js" type="module"></script>