Loading the demo.
pnpm add @quartifex/reelNot on npm yet: the first release is pending. The quickstart, API table, browser support and limitations are in the README.
390 x 844 CSS px · shown at 100%
Teal cells are the frames in memory: the current one first, then outwards, more ahead than behind, plus every 8th frame for fast scrubs.
import { createReel, loadManifest } from "@quartifex/reel";
import { scrubReel } from "@quartifex/reel/gsap";
import { ScrollTrigger } from "gsap/ScrollTrigger";
const manifest = await loadManifest("/sequences/jar/manifest.json");
const reel = createReel(canvas, manifest, { baseUrl: "/sequences/jar/", fit: "cover" });
scrubReel(reel, ScrollTrigger, { trigger: "#scene", start: "top top", end: "bottom bottom" });