Loading the demo.
pnpm add @quartifex/viewfinderNot on npm yet: the first release is pending. The quickstart, API table, browser support and limitations are in the README.
Chapter 1 · Before
A launch page opens.
Scroll on: the pinned sequence starts below.
Chapter 3 · After
The scene hands back to the page.
Scroll up to run it again, or record and replay.
import { createViewfinder } from "@quartifex/viewfinder";
import { gsapSource } from "@quartifex/viewfinder/gsap";
import { reelSource } from "@quartifex/viewfinder/reel";
if (process.env.NODE_ENV !== "production") {
createViewfinder({ sources: [gsapSource(ScrollTrigger), reelSource(reel, "hero")] });
}