How do Apple-style scroll animations work?

A tall runway section pins a canvas, and scroll progress decides which pre-rendered image frame is drawn, while HTML text fades in and out over it.

Are Apple scroll animations video or images?

Typically image sequences drawn on a canvas, because frames can be shown instantly in both scroll directions without video seek lag.

How many frames does a scroll animation need?

Usually 100 to 200 frames for a 5 to 8 second hero at 24 fps, with fewer, smaller frames for mobile.

Does a scroll animation hurt SEO or page speed?

Not if you show a poster frame immediately, keep text as HTML, reserve canvas height to avoid layout shift and load frames in stages.

Can I build this without coding?

AI builders and templates can generate the structure, but the frame sequence must be rendered from your own footage or 3D scene. Starting from a working template saves the most time.

← Scrollhaus Journal

AI Website Guides · 2026-10-05 · 5 min read

Apple-Style Scroll Animation Website: How It Works (2026)

The "Apple scroll animation" look is a pinned canvas that plays pre-rendered frames as you scroll, with text that fades in and out. Here is how the effect works, what it costs in performance, and how to build it.

Written by AmJ, founder of Scrollhaus, and edited by the Scrollhaus editorial team. Sources and methodology are documented in the article.

A cinematic scroll-driven product website in the Apple style — Scrollhaus Journal · AI Website Guides

Key takeaways

Disclosure: ScrollHaus publishes this guide. Technique descriptions come from public documentation of the libraries and browser APIs named, and the live examples are ScrollHaus websites you can scroll yourself.

What is the Apple-style scroll animation?

Product pages from large hardware makers often feel like a film that you control with the scroll wheel. The product rotates, opens or explodes into parts while text blocks appear and fade. This is not a heavy video. It is usually an image sequence drawn on a canvas, mapped to scroll position, with HTML text layered above.

The four building blocks

A tall runway section. Two to four viewport heights of scroll distance give the animation time to play.
A pinned canvas. position: sticky keeps the canvas in view while the runway scrolls.
A frame sequence. Pre-rendered WebP or JPEG frames, loaded in stages, drawn according to scroll progress.
Scroll-mapped copy. Headlines fade in and out at set progress ranges.

Why not just use video?

Video scrubbing depends on keyframes, so scrolling backward stutters. Frames are independent images, so any frame can be drawn instantly in both directions. The cost is download size, which you control with WebP, fewer frames on mobile and staged loading. The full implementation is in our image sequence canvas tutorial.

Build the effect in five steps

Render or export a 5 to 8 second clip of the product moving. A clean background and locked camera give the best compression.
Extract 24 fps frames with FFmpeg into WebP at about 1920 wide.
Create the runway and sticky canvas.
Preload coarse frames first (every 8th), then fill in.
Smooth the scroll with Lenis and fade text with GSAP ScrollTrigger.

Performance and accessibility rules

Show a static poster frame immediately so the largest contentful paint stays fast.
Ship a smaller frame set to phones and cap canvas pixel ratio at 2.
Keep headlines as real HTML text, not baked into frames.
Offer a reduced-motion fallback that shows one frame.

The Core Web Vitals checklist for animated websites covers each of these in detail.

See it live

Scroll these ScrollHaus builds to feel the effect: CORNERSTONE, VORTA, MOIRÉ and IVOIRE. They use the same frame-sequence approach, each with a different subject. Browse all scroll animation websites or learn how to make an animated website with AI.

Explore animated website templates at Scrollhaus →

Need help with a template, account, or project? Email admin@scrollhaus.ai.