Apple’s product pages often feature dazzling scrolly animations that reveal hardware in layers, but they typically rely on JavaScript. This Q&A explores how to recreate the Vision Pro’s scroll-driven animation using only CSS, making it responsive and performant—while acknowledging current browser limitations.
1. What is the Vision Pro scrolly animation, and why is it special?
Apple’s Vision Pro site includes a scroll-triggered animation that gradually “explodes” the headset into separate hardware components, then flips the device to show its eyepieces. The effect uses transparent PNG images layered at different depths, creating a 3D perspective as you scroll. What makes it remarkable is its seamless, cinematic feel—each part glides into view in perfect sequence. Traditionally, achieving this required JavaScript (to sync scroll position with image changes or video playback). Apple’s version also adapts to viewport size, though it switches to a static image on smaller screens. Rebuilding it solely with CSS is a challenge that tests the limits of modern CSS scroll-driven animations, especially for responsiveness and cross-browser compatibility.
2. Why attempt to recreate this animation using only CSS?
CSS has evolved dramatically, introducing native scroll-driven animations via scroll-timeline and related features. Rebuilding Apple’s effect without JavaScript proves that CSS alone can handle complex, multi-layered, responsive animations. It also reduces reliance on heavy JS libraries, improves performance (especially on mobile), and makes the animation easier to maintain. The Vision Pro animation is an ideal test case because it involves sequential reveals, layering, and a final video-like flip—all of which can be tackled with CSS keyframes and scroll-driven triggers. CSS-only solutions are generally faster and more accessible, though they currently face browser support gaps (e.g., Firefox). This experiment pushes the boundaries of what’s possible with pure CSS, inspiring developers to embrace the platform’s growing capabilities.
3. What are the two main stages of the Vision Pro animation?
The animation unfolds in two distinct stages. Stage 1, called “Exploding Hardware,” shows three electronic components rising sequentially from the bottom of the device. Each component consists of two images—one appearing in front of the others and one behind—creating a layered, 3D effect. The outermost layer (like a sub roll) wraps around the middle layer (the bun), which in turn wraps around the innermost part (the bread stick). Transparent areas in each image let background components show through, giving depth. Stage 2 is the “Flip-Up to Eyepieces”: after the hardware is fully revealed, the entire device tilts upward in a smooth motion to expose the eyepiece lenses. Apple uses a video clip for this flip, controlled by scroll position via JavaScript. In the CSS recreation, we emulate that motion with a series of CSS transforms and a scroll-driven timeline.
4. How did you handle responsiveness issues with the exploding hardware stage?
Initially, I used position: fixed and position: absolute on <img> tags stacked in a <div>. That approach failed because the images overflowed the viewport when resized, and the device couldn’t scroll in and out naturally like on Apple’s site. Studying Apple’s solution revealed they used each component as a background image with background-position: bottom center and background-size set to cover or contain. This keeps the image anchored at the bottom center and scales proportionally. I adopted the same method: six background images (two per component) on separate divs, each positioned at bottom center. This made the layout responsive—shrinking the browser window scales everything down while keeping the components centered. The scroll-driven animation then moves each background image vertically using CSS keyframes tied to the scroll timeline, so they rise from the device naturally.
5. What technique did you use for the flip-up stage without a video?
Apple uses a real video for the flip-up, advancing frames with JavaScript based on scroll. Without JavaScript, I replaced the video with a pure CSS transformation. The final component (the full device) is made to rotate upward from a tilted position to an upright one using transform: rotateX() over a range of scroll progress. To mimic the video’s smoothness, I used a @keyframes animation with a scroll-timeline that maps specific scroll positions to rotation angles—something like 0% { transform: rotateX(90deg); } 100% { transform: rotateX(0deg); }. Since the eye expects a continuous motion, I added easing to the keyframes for a natural acceleration/deceleration. The result feels similar to Apple’s video, though without the per‑frame grain. A subtle opacity transition helps blend the flip into the scene. Unfortunately, because Firefox doesn’t support CSS scroll-timeline, this stage still fails there.
6. What are the browser compatibility limitations of a CSS-only version?
At the time of writing, the major limitation is Firefox. While Chrome and Safari (via the Web Animations API) support scroll-timeline and view-timeline, Firefox has not yet implemented these features. That means the CSS-only recreation works perfectly in Chromium browsers and Safari, but falls back to a static layout in Firefox. Additionally, older versions of Chrome needed flags enabled. Another limitation is that CSS scroll‑driven animations cannot yet match the exact frame‑by‑frame control of a JavaScript‑driven video—so the flip‑up stage is slightly less cinematic than Apple’s original. Finally, responsiveness was tricky: using background images at bottom center solved scaling, but the animation range must be carefully calibrated to avoid clipping on very tall or short viewports. Despite these constraints, the CSS‑only approach is surprisingly viable and continues to improve as browsers catch up.
7. Can I see the final code and try it myself?
Yes! The full HTML and CSS code is available in the article’s source repository. You can copy the markup—six divs with background images, each wrapped in a container with scroll‑driven keyframes—and adjust the scroll‑range values to match your layout. For the flip‑up stage, find the keyframe that applies rotateX to the parent element. To test, open the page in Chrome or Safari, scroll down past a black background section, and watch the components rise then flip. If you’re in Firefox, you’ll see a static image instead. I encourage you to inspect the code, tweak the easing, or add your own graphics. The principles used here—background images for layering, scroll timelines for sequencing, and CSS transforms for motion—can be adapted for other product animations. With browser support growing, CSS‑only scrolly tell‑all animations are becoming a practical tool for modern web design.