Multi-step stories

When a chart moves through more than two states, build them all up front and pass them to sequence(). You get one controller for the whole timeline, with no empty frame between legs.

import { bar } from 'visdelta/bar';
import { sequence } from 'visdelta/transition';
import 'visdelta/style.css';

const products = [
  { product: 'Hardware', revenue: 12, profit: 5 },
  { product: 'Software', revenue: 18, profit: 11 },
  { product: 'Services', revenue: 9, profit: 7 },
  { product: 'Support', revenue: 6, profit: 4 },
];

const revenue = bar(products)
  .x('product', { label: 'Product line' })
  .y('revenue', { label: 'Revenue ($M)' });
const profit = revenue.y('profit', { label: 'Profit ($M)' });
const ranked = profit.sort('profit', 'descending');
const emphasised = ranked.highlight({ product: 'Software' });

// Authored states are fixed boundaries of one seekable timeline.
const states = [revenue, profit, ranked, emphasised];

const story = await sequence(states, { target: '#chart' });
story.play({ duration: 800 }); // or story.progress(1.5)

Build the statesCopy Anchor Link

import { bar } from 'visdelta/bar';
import { sequence } from 'visdelta/transition';

const revenue = bar(products).x('product').y('revenue');
const profit = revenue.y('profit');
const ranked = profit.sort('profit', 'descending');
const emphasised = ranked.highlight({ product: 'Software' });

const story = await sequence([revenue, profit, ranked, emphasised], {
  target: '#chart',
});

All states must use the same chart type. To return to the start, repeat the first state at the end: [revenue, profit, ranked, revenue].

Seek in leg unitsCopy Anchor Link

A sequence's value runs from 0 to states.length - 1. Integers are the authored states; fractions are positions within a leg.

story.progress(0);      // revenue
story.progress(1.5);    // halfway from profit to ranked
story.progress(3);      // emphasised
story.play({ to: 2 });  // from the current position to ranked

Scroll-driven stepsCopy Anchor Link

Start from the single-file scroll template. It maps measured step positions to sequence leg units, holds each authored state before advancing, and handles reverse scrolling, replay, resize, reduced motion and iframe fallback. Keep scroll control outside the library.

The progress model explains why authored states stay at integers even when the planner inserts extra route stages.

Authored states are fixedCopy Anchor Link

Each state you pass is a boundary the planner keeps. Within each pair, the chart may still insert generated stages; these occupy the existing leg and do not shift integer positions. They do add playback time, because duration applies to every serial stage. See Progress.