scroll-image-sequence

Canvas-based scroll-driven image sequence animation.

Install

npm install scroll-image-sequence

Usage

import { initScrollImageSequence } from 'scroll-image-sequence';

initScrollImageSequence({
  canvas: document.querySelector('#hero'),
  frameCount: 100,
  imagePath: (i) =>
    `/imgs/FIG_${String(i).padStart(4, '0')}.jpg`,
});

API

initScrollImageSequence(options: InitScrollImageSequenceOptions): void

interface InitScrollImageSequenceOptions {
  canvas: HTMLCanvasElement;
  frameCount: number;
  imagePath: (index: number) => string;
  scrollArea?: number; // px, default = window.innerHeight * 2
  resize?: boolean; // default = true
  onLoaded?: () => void;
  onFrame?: (frameIndex: number) => void;
}

Notes

• This library is framework-agnostic and only touches the provided canvas.
• For demos, ensure your server can serve ES modules from dist/.