Lane Documentation

Lane Schema new

A lane object defines one horizontal section of a multi-lane timeline. Load articles with timeline.load and add a lane key to place them in a lane.

At a glance: Required fields — id. All other fields are optional.

Lane layout controls lane chrome. Article options control article placement. See Lane Article Overrides for the supported article keys.

// LaneData schema (clickable)
{
  id: /* required: number|string */,
  title: /* optional: string */,
  visibility: /* optional: 'visible' | 'hidden' | function(Lane): 'visible' | 'hidden' */,
  className: /* optional: string */,
  headerClassName: /* optional: string */,
  bodyClassName: /* optional: string */,
  titleClassName: /* optional: string */,
  layout: { /* See: Lane Layout */ },
  style: { /* See: Lane Style */ },
  article: { /* See: Lane Article Overrides */ }
}

const lanes = [
  {
    id: 'people',
    title: 'People',
    layout: { heightWeight: 2 },
    style: { // See: Lane Style
      body: { backgroundColor: 'rgba(219, 234, 254, 0.35)' },
      title: { color: '#1e3a8a', font: '600 13px Inter' }
    },
    article: {
      defaultCardLayout: 'landscape',
      defaultStyle: { width: 220 },
      autoStacking: { rowSpacing: 36 }
    }
  },
  {
    id: 'projects',
    title: 'Projects'
  }
];

Lane Options new

Configure multi-lane timelines where related articles sit in separate horizontal lanes while sharing one bottom axis.

These options live under options.lane.*. The values shown below are the defaults.

Lane layout controls lane chrome. Article options control article placement. See Lane Article Overrides for the subset of article options supported by each lane's article object. For a minimal runnable setup, see the simple timeline lanes CodePen.

// Lane options (defaults)
{
  visible: true,
  defaultId: 'default',
  gap: 12,
  topGap: 0,
  axisGap: 24,
  defaultLayout: {/* See: Lane Layout */ },
  defaultStyle: {/* See: Lane Style */ },
  defaultClassName: '',
  defaultHeaderClassName: '',
  defaultBodyClassName: '',
  defaultTitleClassName: '',
  data: [
    /* see Lane Schema; each lane can include
       article: { ... } - see Lane Article Overrides */
  ]
};

Lane Article Overrides

Set LaneData.article to override the timeline-wide article defaults from options.article for one lane. It supports a focused subset of Article Options; each value merges over the timeline article options for articles in that lane.

Use the Article Options section for the full descriptions and value shapes. The links below point to the matching option descriptions.

Supported keys

• Data: defaultData, density
• Baseline distance: distanceToBaseline.value, distanceToBaseline.responsive, distanceToMainLine
• Card layout and styles: defaultCardLayout, defaultStyle, defaultHoverStyle, defaultActiveStyle, layoutStyles
• Auto stacking: autoStacking.active, autoStacking.rowSpacing, autoStacking.fitToHeight, autoStacking.topGap
• Period lines: periodLine.baselineGap, periodLine.spacing, periodLine.thickness

Other article keys, including cardLayoutBreakpoints, rendering, animation, star, periodLine.position, periodLine.stacking, and autoStacking.range, remain timeline-wide options.

Lane Methods new

Manage lane data, styles, visibility, and order after your timeline is initialized.

Tip: Loaded lanes are stored as Lane instances in timeline.lanes. Retrieve one with timeline.getLaneById(id) before calling the instance methods below.

const lane = timeline.getLaneById('people');

lane.setOption({
  title: 'People & biographies',
  article: {
    defaultCardLayout: 'landscape',
    defaultStyle: { width: 220 }
  }
});

const layout = lane.setOption('layout');

const lane = timeline.getLaneById('projects');

lane.setStyle('title.color', '#155e75');
lane.setStyle({
  body: {
    backgroundColor: 'rgba(207, 250, 254, 0.35)',
    borderColor: 'rgba(14, 116, 144, 0.35)'
  }
});

const lane = timeline.getLaneById('reference');

lane.hide();
lane.show();

const peopleLane = timeline.getLaneById('people');

peopleLane.moveToIndex(0);
peopleLane.moveUp();
peopleLane.moveDown();

const projectsLane = timeline.getLaneById('projects');

projectsLane.moveBefore('people');
projectsLane.moveAfter('reference');