Development · Tip
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's 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
- Topic
- Frontend Animation
- 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: 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
Modern CSS technique for smooth height transitions without fixed pixel heights
Lightweight 5KB WebGL globe with CSS anchor positioning support
Synchronize video playback to page scroll using the WebCodecs API
Open-source animation library for React, Vue, and vanilla JavaScript
Portable agent skills that enforce design quality in AI-generated frontends
Lightweight, modular JavaScript animation engine for CSS, SVG, and DOM elements
Updated