# Apple-Style Scroll-Driven Canvas Animation Pipeline

> A workflow for building high-performance scroll-scrubbed canvas animations using WebP frames.

This technique builds Apple-style interactive product animations by rendering preloaded WebP frame sequences to an HTML5 canvas instead of scrubbing a video element. Extracting frames from AI-generated video and binding canvas rendering to scroll progress eliminates the frame lag, stuttering, and blank flashes common with native HTML video tags.

## How it works

Pipeline & Best Practices for Scroll-Driven Animations:

1. Generate Start & End Frames: Use an AI image generator to create two matching bookend states (e.g., solid headphones and x-ray/exploded view).

2. Interpolate Video: Use a video model like Kling to transition between the start and end frames, exporting an MP4.

3. Extract Frames with FFmpeg:

\`ffmpeg -i animation.mp4 -vf "fps=30" frames/frame-%04d.webp\`

- Use WebP instead of JPG (25-35% smaller, supports alpha transparency).

- Target 120-200 frames total (30fps) for smooth scrolling without massive file weight (~10MB total).

4. Render to HTML Canvas (Do NOT use \`\<video\>\` tag):

- HTML \`\<video\>\` elements cannot be scrubbed accurately; \`currentTime\` is asynchronous and causes blank frames/stuttering.

- Use \`\<canvas\>\` with \`ctx.drawImage(frames\[currentFrame\], 0, 0, width, height)\` for GPU-accelerated, instant frame switching.

5. Preload Frames:

- Batch preload all WebP images into memory upfront before allowing scroll interaction to prevent mid-scroll loading pauses.

6. CSS Runway:

- Set \`.scroll-container { height: 400vh; }\` with \`position: sticky\` on the canvas container to act as the scroll runway.

## What it is for

- Build interactive 3D product showcase landing pages
- Animate exploded or x-ray hardware views tied to scroll position
- Replace stuttering HTML video scroll interactions with GPU-accelerated canvas frames

## Key points

- Generate start and end keyframes using an image generation model
- Interpolate transition video between bookend states using an AI video model
- Extract frames to WebP sequences using FFmpeg to reduce asset weight by 25-35%
- Target 120-200 frames at 30 fps to keep total download size around 10MB
- Preload all image frames into browser memory before enabling interaction
- Render active frames directly to HTML5 Canvas to avoid asynchronous video scrubbing lag
- Use a CSS sticky container with an extended scroll runway to drive animation progress

## Pricing

Free

## Details

- Type: Tip
- Category: [Development](https://xiry.app/topics/development.md)
- Open source: no
- Platforms: Web
- For: Creative frontend developers and web designers
- Alternative to: HTML5 video scrubbing
- Tags: canvas, scrollytelling, ffmpeg, webp, frontend, web dev

## Why it was saved

- [@chase.h.ai, 6 March 2026](https://www.instagram.com/reel/DVhus2Wjd-x/): Solves the flicker, delay, and frame inaccuracy issues of using HTML video tags for scroll animations by preloading WebP frames and rendering them directly onto a canvas.

## Related

- [Animating height: auto in CSS](https://xiry.app/resources/animating-height-auto-in-css): Modern CSS technique for smooth height transitions without fixed pixel heights (Tip, Free)
- [COBE](https://xiry.app/resources/cobe): Lightweight 5KB WebGL globe with CSS anchor positioning support (Web app, Open source)
- [webcodecs-scroll-sync](https://xiry.app/resources/webcodecs-scroll-sync): Synchronize video playback to page scroll using the WebCodecs API (Web app, Open source)
- [Motion](https://xiry.app/resources/motion): Open-source animation library for React, Vue, and vanilla JavaScript (Website, Freemium)
- [Taste Skill](https://xiry.app/resources/taste-skill): Portable agent skills that enforce design quality in AI-generated frontends (GitHub repo, Free)
- [Anime.js](https://xiry.app/resources/anime-js): Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements (Website, Open source)

Updated 3 October 2026. Page: https://xiry.app/resources/apple-style-scroll-driven-canvas-animation-pipeline

Make your own library: Xiry takes your saved reels, tweets, Reddit bookmarks and Watch Later videos, makes them searchable and pulls the useful stuff out, like this library. It's invite-only for now; join the waitlist at https://xiry.app/#waitlist.