Twelve scroll animation examples from brands using the technique well — what they animate, why it works, and what you can adapt for your own site.
1. Apple — iPhone Product Pages
The reference example. Apple's iPhone pages use scroll-driven animation to rotate the device, unfold features, and reveal new colors as you scroll. The animation is tied to scroll position frame-by-frame, giving the visitor a sense of control.
Why it works: Each scroll click feels like a beat in a presentation. Visitors absorb more product detail because they pace themselves.
2. Apple — AirPods / AirPods Pro
The AirPods pages take it further with case-opening animations and 3D earbud rotation tied to scroll. The choreography matches the marketing narrative: "open the case → see the buds → see them in your ear."
3. Stripe — Pricing Page Hero
Stripe uses subtle scroll-driven gradient and 3D-card animation on its homepage and pricing pages. The effect is more restrained than Apple's but still scroll-tied.
4. Linear — Feature Pages
Linear's feature pages use scroll-driven animation to demo product UI in motion. As you scroll past a feature description, the UI screenshot animates to demonstrate the behavior.
Why it works: Reading about a feature and watching it work in the same scroll motion compresses the "show, don't tell" gap.
5. GitHub — Universe Conference Page
GitHub's annual Universe conference pages use scroll-driven animation for the hero — a 3D scene that transforms as visitors scroll into the agenda.
6. Cron (now Notion Calendar) — Launch Page
Cron's launch page used scroll animation to show the calendar UI evolving across breakpoints — a single scroll-driven sequence demonstrated the cross-platform value prop.
7. Tesla — Vehicle Configurator Pages
Tesla uses scroll-driven animation on Model 3 / Model Y pages — exterior color shifts, interior reveals, and feature highlights all timed to scroll.
8. Awwwards Site of the Day Winners
Many Awwwards SOTD winners use scroll-driven animation as their signature visual hook. Common patterns: 3D scene rotation, scroll-paced narrative reveals, and parallax-plus-canvas hybrids.
9. Loom — Homepage Hero
Loom's homepage uses scroll-driven animation to demonstrate the product UI in motion — visitors scroll to see Loom's recording flow play out.
10. Robinhood — Product Pages
Robinhood uses scroll-driven phone mockup animations to walk through the trading flow on key product pages.
11. Coinbase — Wallet / Pro Pages
Coinbase's product pages animate device mockups and feature illustrations on scroll, anchoring each scroll segment to a specific feature claim.
12. Shopify Editions Pages
Shopify's "Editions" launch pages — their twice-yearly product reveal events — use scroll-driven animation extensively. Worth studying as a pattern for any e-commerce platform.
What These Examples Have in Common
- Animation is tied to scroll, not auto-playing — visitor controls pace
- The animation has a narrative — it tells a product story, not just rotates
- Frame sequences are pre-rendered (high quality), not generated at runtime
- CDN delivery for fast first paint and smooth playback
The technical pattern is consistent: extract frames from a source video, host on CDN, sync playback to scroll position. Whether you build it yourself or use a tool like ScrollerSites, the underlying mechanic is the same.