How to Make a Scroll Animation Like Apple: 13 Techniques, Recreations and Demos

1. The AirPods Pro image sequence, recreated on CSS-Tricks: Best for understanding exactly how Apple's product shots move

Platform: Vanilla JavaScript + canvas, about 148 frames

Jurn van Wissen's 2020 CSS-Tricks tutorial rebuilds the shifting light on the AirPods Pro hero and is still the clearest explanation of the technique. About 148 numbered frames act as a flip book. A fixed canvas sits in a body set to 500vh, the scroll position divided by the maximum scroll distance (times the frame count) picks the frame, and requestAnimationFrame draws it. All frames are preloaded so fast scrolling does not stutter.

It is the right first build because every part is visible: no library, one canvas, one scroll handler, and you see the cost immediately in the network panel.

The article is blunt about that cost: it is "a lot of images." It suggests a single fallback image, smaller assets for some devices, or a toggle, and notes that Apple itself falls back on slow mobile connections.

Watch out for: Frame sequences are heavy. Encode frames as WebP or AVIF, cap the frame count, and serve a still image to slow connections and reduced-motion users.

2. GSAP's imageSequenceScrub helper: Best for production image sequences with smoothing

Platform: GSAP + ScrollTrigger (GSAP is free)

GSAP's docs include a ready-made helper, imageSequenceScrub, described as "Scrub through a canvas image sequence." You pass an array of image URLs, a canvas and a ScrollTrigger config with `scrub: true`, and it draws the matching frame as you scroll, with options for fps, clearing and an onUpdate callback.

The advantage over the hand-rolled version is ScrollTrigger itself: `scrub: 1` adds a one-second catch-up so the frames glide rather than jump, `pin` holds the section in place while the sequence plays, and `markers: true` shows start and end lines while you tune it. GSAP's pricing page says the library is now "100% free for all users, thanks to Webflow's support."

Watch out for: Pinning adds padding by default so following content does not overlap. If your layout jumps when the pin releases, check pinSpacing before anything else.

ScrollTrigger docs ↗

3. ScrollTrigger pinned sections: Best for feature tours where copy changes over a fixed visual

Platform: GSAP ScrollTrigger

Not every Apple section is a frame sequence. Many are a pinned visual with copy that fades in and out beside it, or a device that scales and shifts while headlines swap. In GSAP that is a timeline with several tweens, attached to one ScrollTrigger with `pin: true` and `scrub`, and optionally `snap: "labels"` so the page settles on each step when scrolling stops.

Snapping is what makes it feel deliberate. Without it, users stop scrolling halfway between two states and see a half-faded headline over a half-turned product.

Watch out for: Snap can fight trackpad momentum and feel like the page is grabbing the wheel. Keep snap durations short and test on a Mac trackpad, a mouse wheel and a phone.

4. CSS scroll-driven animations with view(): Best for reveal-on-scroll with zero JavaScript

Platform: Pure CSS: Chrome and Edge 115+, Safari 26+

The newest route needs no script at all. `animation-timeline: view()` ties an ordinary @keyframes animation to an element's progress through the viewport, and `animation-range` (for example `entry 10% cover 30%`) says which part of that journey plays it. `animation-timeline: scroll()` ties it to the scroll container instead. Chrome shipped the API in version 115, and MDN's compatibility data lists Safari 26 as the first Safari with it; Firefox enabled it by default in version 159 (October 27, 2026).

Because the browser drives the timeline, transform and opacity animations can run off the main thread, which is exactly where JavaScript scroll handlers struggle.

Our Slide In On Scroll below is a pure-CSS version: it slides in from the left as it scrolls into view, slides back out if you scroll up, and uses animation-range to decide exactly when.

Watch out for: Wrap timeline rules in @supports (animation-timeline: view()). Without it, unsupported browsers run your keyframes as a normal time-based animation, which may not be what you meant.

MDN: animation-timeline ↗

5. Bramus's Stacking Cards demo: Best for feature lists where each card lands on the last

Platform: Pure CSS (with a JavaScript WAAPI version)

Bramus, on Chrome's developer relations team, runs scroll-driven-animations.style, a gallery of scroll-driven demos with CSS and JavaScript versions side by side. Stacking Cards is the one closest to an Apple feature section: each card sticks with position: sticky, and a view timeline on the wrapper scales each card down over its own quarter of the exit range so the next one stacks on top.

The clever part is that only the inner content animates, so the wrapper's height and the scroll length never change. That is the kind of detail that keeps sticky effects from jittering.

Watch out for: Sticky stacks rely on the parent having no overflow: hidden. One stray overflow on a wrapper and position: sticky silently stops working.

6. Bramus's Horizontal Scroll Section: Best for product galleries that slide sideways as you scroll down

Platform: Pure CSS (Chrome 115+), WAAPI version available

Apple-style pages often turn vertical scroll into a sideways pan across a row of products or chapters. This demo does it in CSS: a 500vh container provides the scroll room, a sticky wrapper keeps the viewport fixed, and a wide strip slides with a translateX animation linked to a view timeline on the container.

It is the same structure the GSAP version uses (tall container, pinned frame, scrubbed transform), minus the library. Read its source before you reach for a plugin.

Watch out for: Horizontal pans hide content from people who navigate by keyboard or search in page. Make sure each panel is reachable with Tab and that focusing it scrolls it into view.

7. Bramus's 3D Shoe Explorer: Best for rotating a 3D product as the user scrolls

Platform: CSS view timelines + model-viewer (.glb models)

This is the 3D cousin of Apple's turning product shots. Each card holds a sneaker model in a model-viewer element; a view timeline drives the fade and reveal of the title and footer, and a small helper reads the timeline's progress every frame and sets the model's orientation, so the shoe turns as you scroll.

It shows where real 3D beats an image sequence: one .glb file can replace a hundred frames, and the rotation is smooth at any scroll speed. The trade is a 3D runtime on the page.

Watch out for: The model rotation needs that small script; CSS alone cannot set a 3D model's camera. Budget for model-viewer's download and give it a poster image.

8. Bramus's Image Reveal Effects: Best for photography and editorial sections that unmask on scroll

Platform: Pure CSS (with a WAAPI version)

Apple's quieter sections often reveal a photo with a wipe or a clip as it enters, rather than a big transform. The Image Reveal Effects demo does it in CSS: opacity fades from 0 to 1 while clip-path opens from inset(45% 20% 45% 20%) to nothing, driven by a named view timeline with animation-range: entry 25% cover 50%. Because it is tied to scroll position, it plays backwards when you scroll up.

Our Reveal Up On Scroll below is a pure-CSS version of the same idea: a clip-path inset shrinks from 100 percent so the element wipes in from the bottom edge as it scrolls in.

Watch out for: Images revealed by clip-path are still downloaded and painted at full size. Lazy-load them, and do not clip your LCP image or you delay the metric you care about most.

9. GSAP ScrollSmoother: Best for smoothed scrolling and depth parallax on scrubbed pages

Platform: GSAP plugin, used with ScrollTrigger (GSAP is free)

A lot of what people call "Apple smooth" on agency sites is smoothed scroll input. ScrollSmoother adds smooth vertical scrolling to ScrollTrigger pages while keeping the browser's native scroll, so there is no fake scrollbar. It moves a single content element inside a wrapper, and two data attributes do most of the work: `data-speed` gives an element parallax, and `data-lag` makes it trail behind and catch up.

Use it when a scrubbed sequence looks steppy on a mouse wheel, or when you want product shots and copy to move at slightly different depths. On trackpads and phones native scroll is already smooth, so test before adding it.

Watch out for: Elements with position: fixed must sit outside the wrapper or they scroll away. Respect prefers-reduced-motion by skipping the smoother entirely, and keep anchor links and find-in-page working.

10. Three.js Journey: Scroll based animation: Best for a live 3D scene that follows the page as you scroll

Platform: Three.js + GSAP, lesson in Bruno Simon's paid course

When the product is a 3D object rather than a stack of frames, the Apple effect becomes a Three.js scene behind normal HTML. Bruno Simon's Three.js Journey course has a full lesson on exactly that: Three.js as a fixed background, a camera that follows scroll position, cursor-based parallax, and animations triggered as each section arrives, with GSAP listed in its resources.

It is the most flexible route on this list, because the object can turn, explode or change material at any scroll speed without a single pre-rendered frame. It is also the most work, which is why a structured lesson is worth it.

Watch out for: A WebGL scene behind the whole page costs GPU time on every frame. Pause rendering when the scene is off screen, cap the pixel ratio, and give low-power devices a static image.

11. Our scroll-triggered keyframes: Best for copy-paste scroll reveals in pure CSS

Platform: Motions directory, free Ours

Our Keyframe Animations directory has a set of entries tagged scroll-triggered: fade, scale up, slide in, blur in, rotate in and reveal up, each driven by animation-timeline: view() with a tuned animation-range. Each also plays once on load, so browsers without scroll timelines still see the motion, and each has a prefers-reduced-motion guard.

The Blur In On Scroll below is the one that reads most like an Apple product reveal: a filter blur drops to zero while the element fades in and rises a little.

Watch out for: Blur is one of the costlier properties to animate. Use it on one hero element per screen, not on every card in a grid.

12. Our Exploded View scene: Best for an Apple-style exploded product shot without 3D files

Platform: Motions Animation Studio (video export) Ours

The exploded view, a device separating along its axis into its parts, is a staple of product pages. Our Exploded View scene was made in the Animation Studio: a small round speaker on a pale studio sweep separates into eight modeled parts.

You can describe your own product scene in the Studio, scrub the timeline and tune the eases, then export HTML, React, MP4 or GIF. A short exported loop works as a hero where the motion does not need to follow scroll.

Watch out for: A video or frame sequence is a fixed render. If the product changes colour or configuration, you re-export, so keep the source scene saved.

13. Our Glass Header on Scroll: Best for a frosted sticky header over scrolling product shots

Platform: Motions directory, free Ours

Long scroll pages need navigation that stays out of the way of big imagery. Our Glass Header on Scroll starts clear and frosts over once the page scrolls under it, blurring the hero as it passes.

It pairs naturally with any of the techniques above: the header stays readable over a pinned image sequence without a solid bar cutting the product in half.

Watch out for: backdrop-filter over a constantly changing canvas repaints every frame. If your sequence stutters under the header, lower the blur radius or make the header solid while the sequence is pinned.