Apple's product pages set the standard for scroll-driven animation. Here's how they do it and how brands like Stripe and Linear adapted the pattern.
The Apple Pattern
Open any iPhone page on apple.com and scroll. The phone rotates. The screen lights up. Features unfold in sequence. Each scroll motion advances a pre-rendered frame sequence — a video, played back at the scroll-position the visitor controls.
Three things make Apple's implementation special:
- Frame quality — every frame is a high-resolution render, not a real-time 3D scene
- Choreography — the animation matches the marketing copy beat-by-beat
- Performance — frames are CDN-delivered, lazily loaded, and optimized for mobile
How They Built It
Apple's engineering team uses a custom canvas-based player. Frames are exported from After Effects or 3D rendering tools, encoded as JPEGs, and hosted on Apple's CDN. A scroll listener calculates scroll progress and paints the matching frame to a canvas element.
The pattern is well-documented and replicable. The hard parts are:
- Generating the frames at the right resolution and count
- Hosting them on a fast CDN
- Writing the canvas + scroll controller
- Handling mobile (lower frame counts, touch behavior)
Brands That Adapted the Pattern
Stripe uses scroll-driven gradient animation and 3D-card transforms. More restrained than Apple, but the same technical foundation.
Linear uses scroll animation to demo product UI — feature names paired with animated UI sequences.
Tesla uses scroll animation on vehicle pages for color shifts and feature reveals.
GitHub uses scroll animation on conference pages and product launches.
What unites them: the animation has a purpose — it demonstrates the product. Apple-style without product narrative is just decoration.
Adapting Apple-Style Scroll Animation for Your Site
You don't need Apple's engineering team. Tools like ScrollerSites handle frame extraction, CDN hosting, and the canvas controller. Upload your source video, paste a two-line embed, done.
The harder problem is the source asset: you need a video that tells a story. Render a 3D product, capture a real-world process, or animate in After Effects. Once you have the source, the technical delivery is solved.